I am looking to apply a jquery ui like highlight effect to an element , but I am using jquery mobile. Is there anything built into jquery mobile that would allow me to do that, without referencing any of the jquery ui stuff ?
Thanks
Would something like this work?
NOTE: this might affect the hash navigation but it's all CSS
http://jsfiddle.net/MEzAU/
CSS
:target {
-webkit-animation: target-fade 3s 1;
-moz-animation: target-fade 3s 1;
}
#-webkit-keyframes target-fade {
0% { background-color: rgba(0,0,0,.1); }
100% { background-color: rgba(0,0,0,0); }
}
#-moz-keyframes target-fade {
0% { background-color: rgba(0,0,0,.1); }
100% { background-color: rgba(0,0,0,0); }
}
HTML
Link 1
Link 2
Link 3
<p id="1">Paragraph 1</p>
<p id="2">Paragraph 2</p>
<p id="3">Paragraph 3</p>
Link reference:
http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations
You could also try this yellow fade technique solution: http://jsfiddle.net/xb8Km/
Its a nice solution because you don't have to use :target, which is built for anchors hrefs that could interfere with jQuery Mobile ajax hrefs; it also doesn't need the .effect function from jQuery UI which is not designed for jQuery mobile.
<div class="yft">
<div class="content">This is some content</div>
<div class="yft_fade"> </div>
</div>
<script>
$(document).ready(function() {
$(".yft").click(function() {
$(this).find(".yft_fade").show().fadeOut();
});
});
</script>
<style>
.yft_fade {
background-color:yellow;
display:none;
}
.content {
position:absolute;
top:0px;
}
</style>
Related
I need to upload different text files each containing some popups.
I am using JQM 1.4.5 and I'm pretty sure I don't make any syntax errors.
My main program has a menu and the user can choose the text.
At this point, I have to upload the text file and the popup file related to that text.
All the attempts I've made using the '.load' function work for text but not for popups.
Can you give me some suggestions?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup Tooltip</title>
<link rel = "stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel = "stylesheet" href="style/style.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#t1").click (function(){
$("#corpus").load("text1/text1.html");
$("#pp").load("text1/popup1.html #popupBasic").enhanceWithin();
});
$("#t2").click (function(){
$("#corpus").load("text2/text2.html");
$("#pp").load("text2/popup2.html");
});
});
</script>
<style type="text/css">
a:link {color:red;
font-weight:bold;
text-decoration: none;
font-size:100%;
}
#tableMax{
border: 1px solid white;
margin:0 auto;
border-collapse:collapse;
}
#tableMax tr {border-bottom: 1px solid brown;
}
#tableMax td {padding: 18px 25px 18px 20px;
font-family: "Didot";
font-size: 20px;
background-color: antiquewhite;
color:black;
}
#tableMax td:nth-child(1) {
color:brown;
font-size:100%;
text-align:center;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="menu" style="display:block;">
<button class="ui-btn ui-btn-b ui-btn-inline" id="t1">text 1</button>
<br>
<button class="ui-btn ui-btn-b ui-btn-inline" id="t2">text 2</button>
</div>
<div id="corpus"></div>
<div data-role="popup" id="pp"></div>
</div> <!-- chiude content -->
</div>
</body>
</html>
<!-- text1.html> -->
<table id="tableMax">
<tr><td>1a</td>
<td>This text contains a popup
</td></tr>
<tr><td>1b</td>
<td>This text also contains a popup
</td></tr>
</table>
<!-- popup1.html -->
<p id="popup_1" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1a.</p>
<p id="popup_2" style="background:lightgreen; color:#000; max-width:500px;">
This is the content of popup 1b.</p>
Here are some suggestions to achieve what You want:
Basically, IMHO it is better not to create and destroy again and
again a JQM widget. If possible, create just at the beginning all
needed widgets and change the content, i.e. text and images
when You need it.
In my example I will show You both: dynamic destroying and instancing
a JQM table and dynamic changing the content of one existing popup.
Please, note that for a JQM table the thead and th tags are mandatory.
In Your example, You may need to show some data related to a table
row, but in my example I will attach the popup data to a single cell.
I believe, this is a more flexible approach.
The simplest way to create such a relation is to set a custom
data-attribute. You can call it whatever You want. Just for instance,
data-info: popup
After that, the popup content will be retrieved from the clicked
anchor, just before the popup will be open.
For the menu, instead of push-buttons I am using radio-buttons,
so the code will be much simpler, using just one event handler.
Moreover, it will be nice if You tell the user that something is
going on, by using a spinner and a visual feedback after the table
data has been downloaded (table fade-in).
Here is the most relevant code:
$(document)
.ready(function () {
$('input[name=files]').on('change', function (e) {
var path = e.target.id, $table = $("#tableMax").hide().table("destroy");
$.mobile.loading("show");
$.when($.get(path + '/popup.html'), $.get(path + '/text.html')).done(
function (popupData, tableData) {
$.mobile.loading("hide");
/* each data[0] will contain the response text */
$table.html(tableData[0]).table({create: function() {
var allPopups = $('<div></div>').append(popupData[0]);
$(this).fadeIn("slow").data("mobile-table").allHeaders.each(function() {
$(this).data("cells").each(function(){
$(this).find("a[href='#pp']").each(function () {
var popupLink = $(this).attr("data-info"),
popupContent = $(allPopups).find(popupLink);
$(this).data("popup-content", popupContent);
});
});
});
}
});
});
});
})
.on('pagebeforechange', function (e, ui) {
var link = ui.options.link, ctx = link && link.context, hash = ctx && ctx.hash;
if (hash == '#pp') $(hash).empty().html($(ctx).data('popup-content'));
});
Here is a full workng DEMO: https://plnkr.co/edit/3IXDqQJMVn2QYOed?open=lib%2Fscript.js
Im following along with http://multiplethreads.wordpress.com/tag/pagedown/
The example in the link above makes use of twitter bootstrap whereas i make use of zurb foundation.
Basically im trying to get a custom dialog box to insert images from my pagedown editior (sort of like how stackoverflow does it).
Im abale to pull up the modal box (foundation reveal) but it seems to be "behind" something and i cant seem to interact with it. Any ideas?
My code:
js file:
PH.ui.markdown = {
initialize: function () {
var markdownTextArea = $('textarea[data-markdown=true]');
if (markdownTextArea.length == 1) {
markdownTextArea.addClass('wmd-input')
.wrap("<div class='wmd-panel' />")
.before("<div id='wmd-button-bar'></div>")
.after("<div id='wmd-preview' class='wmd-preview'></div>");
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function (callback) {
//setTimeout(function () {
$('#myModal').foundation('reveal', 'open');
// }, 5000);
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
}
}
};
html:
<div id="myModal" class="reveal-modal">
<h2>Upload Image</h2>
<%= f.file_field :image %>
<button class="btn" id="insert_image_post">Insert Image</button>
<!-- <a class="close-reveal-modal">×</a> -->
</div>
I figured it out.
The wmd-prompt-background had a z-index of 1000:
<div class="wmd-prompt-background" style="position: absolute; top: 0px; z-index: 1000; opacity: 0.5; height: 1085px; left: 0px; width: 100%;"></div>
So i just added:
<style type="text/css">
#myModal {
z-index: 1500;
}
</style>
to my page and it worked.
One way to do it is to position the div of your modal directly under the <body>. This way you make sure that the modal is not part of elements with special z-index
I created a simple js banner.
First a company name will run into the center from left and then fading in an image logo
html
<div id="banner-container">
<div id="companyname"><p>P.Classique Trading Co. Ltd.</p></div>
<div id="logo"><img src="img/twitter_logo.png" width="100" height="100" /></div>
</div>
css
#banner-container {
position:relative;
left:300px;
top:100px;
overflow: hidden;
display:box;
background-color: #282800;
width:500px;
height:300px;
color:#FFFFFF;
}
#companyname {
position: relative;
color:yellow;
top:15px;
left:-500px;
font-family: 'Finger Paint', cursive;
}
#logo {
position: relative;
display:none;
top:50px;
left:200px;
}
js
$(document).ready(function() {
var left = $('#companyname').offset().left;
$("#companyname").css({left:left}).animate({"left":"120px"}, {duration:1000, easing:'easeOutBounce'});
$("#logo").fadeIn(1500);
}
);
the result is two animations start at the same time which is not I want to.
Working jsFiddle Demo
Use a callback for your animation:
$("#companyname")
.css({left:left})
.animate(
{"left":"120px"},
{
duration:1000,
easing:'easeOutBounce',
complete: function () {
$("#logo").fadeIn(1500);
}
}
);
Try this fiddle: http://jsfiddle.net/KhsWt/
You can use the second fadein as parameter for when first one finishes
$(document).ready(function() {
var left = $('#companyname').offset().left;
$("#companyname").css({left:left}).animate({left:"120px"}, 1000, 'easeOutBounce',
function() {
$("#logo").fadeIn(1500);
}
)});
When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton.
I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="dialog-message" title="Download complete" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<input type="text"/>
<input type="radio" onClick="showDialog();"/>
<input type="radio"/>
</body>
</html>
And the jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: 'center',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.
the css:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-widget-overlay {
background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity: .50;
filter:Alpha(Opacity=50);
}
can anyone help me use the jquery ui selectable library to perform the following functions:
Allow a user to select multiple items with a mouse click
De-select an item if it is already selected with a mouse click
This is worked around in another question, but I'm reposting here for anyone who finds this via google. If you bind the "mousedown" event in jQuery and set metaKey there (as if the user is holding the ctrl/cmd key), then when you call selectable, it will already be set.
$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable();
Doesn't use Selectable but this will get you the behavior you want with the setup you already have:
instead of
$( "#selectable" ).selectable()
try
$(".ui-widget-content").click( function() {
$(this).toggleClass("ui-selected");
});
Have you checked the demo page for selectable? You can already do this. To select multiple items, just hold control. This is similar to how you would work with files. Is using "Ctrl+Click" not good enough?
Demo Code Here:
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div>
Take a look at my answer on this thread.
jQuery UI selectable - making multiple select default
It includes the full code replacement for the selectable ui js as well as outlining the changes needed, making this an option that can be passed.
use this code may be ot helps you
$('#selectable').bind("mousedown", function (e) {
e.metaKey = true;
}).selectable('filter : td')
if you are using the selectable on table for td's the use selectable('filter : td') else
use selectable()