I trying to get an image (cookie policy) that, once clicked, displays a dialog box informing that cookies are used on this website. I was hoping to use a jQuery dialogue box but it seem difficult.
Demo link: http://myfirststepsto.weebly.com/
The jQuery I would like to use: http://jqueryui.com/dialog/#default
<div id="oneout">
<span class="onetitle">
</span>
<div id="oneout_inner">
<centre>
<img src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" />
</a>
<br></center></div></div>
I made a fiddle for you hope it helps! jsFiddle here
HTML:
<div id="oneout">
<span class="onetitle"></span>
<div id="oneout_inner">
<center>
<a><img id="opener" src="https://dl.dropboxusercontent.com/u/89687987/mycookie.png" alt="cookie policy" /></a>
<br>
</center>
</div>
</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Javascript:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
Related
Open a page in dialog style, the close button is added by default. Is there a way to catch the click event of the close button of the dialog page. I like to invoke a callback before the dialog page is closed.
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
Show Dialog
</div>
<script>
function showDialog() {
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );
}
</script>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
This is Dialog
</div>
</div>
The pagecontainerhide event can be used. but it did not work for ajax. If the dialog page is dynamically created in DOM, the ui.prevPage is not defined for the hide event.
Thanks for any help.
The close button is an anchor tag (<a></a>) in side a header element with class .ui-header inside a dialog container with class ui-dialog-contain. So you can use the jQuery selector:
".ui-dialog-contain .ui-header a"
When you handle the click event, you can get the parent page by finding the closest() DOM element with the ui-dialog class:
$(document).on("pagecreate", "#page1", function(){
$(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));
});
});
DEMO
I have added this scroll feature with no plugins to scroll up and down a gallery of large images on a single page. My code is not very elegant but the scroll basically repeats itself from image to image on action of click on arrows.
<script>
$(document).ready(function (){
$("#click4").click(function (){
$('html, body').animate({
scrollTop: $("#image2").offset().top
}, 600);
});
});
</script>
<script>
$(document).ready(function (){
$("#click5").click(function (){
$('html, body').animate({
scrollTop: $("#image4").offset().top
}, 600);
});
});
</script>
<div id="top">
<class id="image3"><img src="images/blank.png" alt=""/></class></div>
<div id="gallery">
<img src="images/image3.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click4"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click5"> <span class="arrow-s"></span> </class>
</div>
<script>
$(document).ready(function (){
$("#click6").click(function (){
$('html, body').animate({
scrollTop: $("#image3").offset().top
}, 800);
});
});
</script>
<script>
$(document).ready(function (){
$("#click7").click(function (){
$('html, body').animate({
scrollTop: $("#image5").offset().top
}, 800);
});
});
</script>
<div id="top">
<class id="image4"><img src="images/blank.png" alt=""/></class> </div>
<div id="gallery">
<img src="images/image4.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click6"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click7"> <span class="arrow-s"></span> </class>
</div>
The problem I am having is the images seem to flicker as you move up and down. Two questions.
Is there a simple way to avoid flickering with large images when scrolling.
Can I add a fade in fade out as you scroll into each image and how do I add this to the script. I think this will reduce the amount of flickering and add a nice effect.
Thanks for any advice.
Ive taken a look at what you have posted but I'm not able to get your code working as-is.
firstly, you should try to combine your scripts into 1. for example, you have a function for each click to scroll to 1 image. What you should do is create just 1 function then have that check the image to scroll to. There are many ways that you can do this but here is an example:
$(".clk").click(function () {
var $this = $(this),
img = $this.data('img');
$('html, body').animate({
scrollTop: $("#"+img).offset().top
}, 600);
});
Along with this function, you would need to change your markup like this:
<div id="Div6">
<div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span>
</div>
</div>
so, I have added a class of clk, this is what is going to call the function now, not clicking on the ID so that we can add this class to as many images as we want. Next, in your functions you are scrolling to the top of an image which is hard coded into each ID function... I have added an HTML Data attribute "data-" and have called it img ("data-img"). So now, when you click on class, you will call the function which will read the attribute and know where to scroll to.
Once you have got this working, please create a jsFiddle (jsfiddle.net) where you paste your html, jquery and css into the boxes and you can run the code there. Then save it and post the link back here for me so that I can see a working version and I'll take another look for you. ;-)
I have a kendo grid. I am using an add and custom button in the toolbar as the following code:
toolbar: ["create", {
text: "Print record",
className: "k-grid-custom",
imageClass: "k-add"
}],
I also want to add a custom toolbar (dropdown menu) as this example
I used similar code in the demo like
toolbar: kendo.template($("#toolbarIsExpire").html()),
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
</script>
I want to show in the toolbar the add button and my custom button and the dropdown menu (IsExpired)
How to mix between the two toolbar in order to have both of them ?
Extend your template:
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
<a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"> </span>Add new record</a>
</script>
SUMMARY:
I need to insert a "Back to Top" links after every <div class="wrapSection">. I've been successful using the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
Back To Top
</div>
');
</script>
However, I want to use a smooth scroll when clicking 'Back to Top.' With that in mind, I tried the following:
<script>
$('.wrapSection').after('
<div class="backToTop clearfix">
<a href="javascript:void(0)" onclick="goToByScroll('top')" class="up">
Back To Top
</a>
</div>
');
</script>
That does not work. Being a jQuery rookie, I did what seemed logical, which seems to never be the correct answer.
IN A NUTSHELL
More or less, I need this to appear, dynamically, after every <div class="wrapSection">:
<div class="backToTop">
<a class="top" href="javascript:void(0)" onclick="goToByScroll('top')">
Back to Top
</a>
</div>
This is the solution I came up with:
$(document).ready(function() {
// Markup to add each time - just give the element a class to attach an event to
var top_html = '<div class="backToTop">Back To Top</div>';
$(".wrapSection").after(top_html);
// Use event delegation (see http://api.jquery.com/on/)
$("body").on("click", ".top", function(e) {
e.preventDefault();
$("html,body").animate({ scrollTop: 0 }, "slow");
});
});
You can try a jsFiddle here: http://jsfiddle.net/F9pDw/
I have two tabs generated by jquery-ui. I do something in the Tab1 and on a button click, there is an AJAX call which displays the results in Tab2.
So I want to change the active tab on button click ( after the ajax call finishes ). Can I do so?
I've created a jsFiddle here
I tried onclick='$("#tabs-2").trigger("click")
'> but it didn't do anything.
As info (in case someone stumbles upon this later and gets an error on the select method) - In jQuery-UI 1.9+, the select method was deprecated.
(http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)
Use the option method, example:
$("#tabs").tabs("option", "active", 2);
Use onclick='$("#tabs").tabs( "select", "tabs-2" )'
http://jqueryui.com/demos/tabs/#method-select
js fiddle
http://jsfiddle.net/maheshvemuri/M7Fdu/
Here is JS part of the code:
$(document) .ready(function() {
$("#tabs").tabs();
$(".btnNext").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
Here are the "a href" tags to be added in your tabs div
Example:
<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
You have to make the trigger call to "a" inside the "li", not direct to the tab "div" like it's done.
<div id="tabs">
<ul>
<li><a id="lnk1" href="#tabs-1">tab1</a></li>
<li><a id="lnk2" href="#tabs-2">tab2</a></li>
</ul>
<div id="tabs-1">
<button type="button" id="clicktab2" onclick='$("#lnk2").trigger("click");'>
go to tab2
</button>
</div>
<div id="tabs-2">
tab2 content
</div>
</div>
Example:
http://jsfiddle.net/Tf9sc/152/
Also you can try
$(window).load(function(){
$('#tabs-2').trigger('click');
});
that's because you cannot trigger call the tabs() in ready mode. document.ready is executed earlier than window.load.