How to use the .click function with overlay? - javascript

I am trying to use the .click function with the overlay from jQuery tools, but it is not working.
HTML:
<p id="click">Clikc here:</p>
<div class="pop">
<div>
<p>some text here</p>
</div>
</div>
jQuery function:
$( "#click" ).click(function(){
$( ".pop" ).overlay({
top: 10,
mask: {color:'#595959',loadSpeed: 1000,opacity: 0.5},
closeOnClick: false,
api: true
});
I have already added the (document).ready at the top. I want the overlay to pop up when the user clicks the text.

You need to separate the code to 2 operations, 1. Define the overlay, 2. programarically launch the overlay. See this demo
jQuery(function () {
$("#click").click(function () {
$(".pop").overlay().load();
});
$(".pop").overlay({
top: 10,
mask: {
color: '#595959',
loadSpeed: 1000,
opacity: 0.5
},
closeOnClick: false,
api: true
});
})
Demo: Fiddle

I have found the problem. The problem is in the jQuery tools version 1.2.5, it seems as if the overlay is not a method and also in the 1.2.6. What I had to do is use the version 1.2.7 and it worked. I loaded it right after my original jQuery.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src=""http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js""></script>

Related

changing slimscroll position

Is there a way to move scrollbar position on initialisation when using slimscroll? I found it's possible to do this using jQuery on native scrollbar with "scrollTop", but don't see how would I be able to do it using slimscroll. Here is a fiddle. http://jsfiddle.net/c8d3ohue/
Basically I want the first div to be scrolled down on init, like in this picture.
My code:
<div class="slimScroll" style="overflow-y:auto;height:200px;width:250px">
<div class="child-height-1" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightgreen">asd</div>
</div>
<div class="child-height-2" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightyellow">asd</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-scroll/1.3.2/slimscroll.min.js"></script>
<script>
$(function () {
new slimScroll($('.child-height-1')[0]);
new slimScroll($('.child-height-2')[0]);
});
</script>
If you use jquery.slimscroll.min.js instead of slimscroll.min.js, you can do this like this.
For your same HTML above, in the document ready you can do like this,
var itemContainer1 = $(".child-height-1");
itemContainer1.slimScroll({
height: '200px',
start: 'bottom',
alwaysVisible: true
});
var itemContainer2 = $(".child-height-2");
itemContainer2.slimScroll({
height: '200px',
start: 'top',
alwaysVisible: true
});
See a fiddle,
http://jsfiddle.net/anjanasilva/uypabr6o/
How it looks,
Hope this helps.

How can we pass the parameter from jQuery Dialog and change the content of the html?

I am looking to dynamically change the image shown in the jQuery Dialog. I am trying to pass the ‘image path’ as parameter which will be used to change the image shown in the jQuery dialog. Please! Check my code below.
By default, it will show ‘images/firstImage.jpg’ in the jQuery Dialog. Now, I am trying to change it to ‘images/secondImage.jpg’ through jQuery Dialog parameter.
<link href="jquery/jquery-ui.css" rel="stylesheet" />
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function () {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
show: "blind",
hide: "blind",
width: "50%",
height: "auto",
resizable: false,
position: 'center',
overflow: "hidden",
});
});
function OpenGallary(photoSrc) {
$("#dialog").dialog("open").data("param", photoSrc);
}
</script>
<body>
<a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
<div id="dialog" title="Photo Gallary">
<div id="aa" style="width: 800px;">
hello this is my world.
</div>
<p>
<img src="images/firstImage.jpg" />
</p>
</div>
</body>
Your function OpenGallary (I think you mean Gallery, but I digress) is just setting the data attribute on the dialog div, which is not going to affect the image tag.
The OpenGallary function can be changed to something like:
function OpenGallary(photoSrc) {
// Change the src attribute directly on the img in the dialog:
$("#dialog img").attr("src", photoSrc);
// Now that the dialog html is updated, open the dialog:
$("#dialog").dialog("open");
}
Depending on what you're trying to do, you may want to select the img directly with an id on the tag - the selector used above is just for working with the existing html.

I would like my id to shake when the user clicks a button

i would like my id to shake when a user clicks it, how can i achieve that? I am a beginner in jquery and am currently finishing up php, I am going to study jquery next.example:https://twitter.com/signup
this is my html:
<input id="sub" type="submit" value="Sign Up">
and this is my js:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$( document ).click(function() {
$( "#sub" ).effect( "shake",{distance:100} );
});
</script>
also if i wanted to implement times and direction would i do this?:
$( "#sub" ).effect( "shake",{direction:right},{distance:100},{times:6} );
Try this out:- http://jsfiddle.net/adiioo7/kx8q8/2/
Use #sub instead of document on click.
jQuery(function ($) {
$("#sub").click(function () {
$(this).effect("shake", {
direction: 'right'
}, {
distance: 100
}, {
times: 6
});
});
});
JSBIN: http://jsbin.com/uGAMulOL/3/
Add the # for the sub id element and put right in quotes. Also the options should be fixed in the object literal.
$("#sub").click(function() {
$(this).effect("shake",{direction:'right',distance:100,times:6000});
});

Open div when click a another div

I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo
You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});
alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');
you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<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>
<button id="opener">Open Dialog</button>
if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});

jquery modal is not working

jquery modal working when code is in same page
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
but, when i'm trying to separate the above code in different file, then it is not showing
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "/dialog.jsp#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>
dialog.jsp
<div id="#dialog-modal" title="Demo">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
thanks in advance !!
You cannot call an external resource in a jQuery selector like $("/dialog.jsp#..."). Instead you need to load the resource with an AJAX call.
First, add a node to your main HTML to receive it. I've added <div id='dialog-content'></div>. Then load the .dialog() on that node:
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-content" ).dialog({
height: 140,
modal: true,
// Use load function to populate the dialog:
load: function() {
$("#dialog-content").load("/dialog.jsp#dialog-modal")
}
});
});
}
</script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>
That's simply not going to work; jQuery is not going to load the other page fragment for you just because you reference it with that selector; it's not even valid selector syntax.
If you want to load the dialog from another file, you'll have to either do a <jsp:include> to include it server-side or else make an explicit ajax call (with jQuery .load() or .ajax() or whatever) when something happens that makes you want to show the dialog.
That's because there is not element in the dom with the id "dialog-modal'. Your selector is incorrect. Do a console log of your jquery selector result and you'll see it's empty. Make sure the element in loaded in the dom. You can also create it on the fly:
$('<div id="my-popup">').dialog({
height: 140,
modal: true
});
Adding a "path" to your jQuery selector does not put the javascript in a separate file, and I don't think I've seen a successful use of having your HMTL markup in a separate file.
Move the markup back to index.jsp and move the show() function into a seperate .js (not .jsp) file.
Link the new .js file to index.jsp:
<script type="text/javascript" src="/show.js"></script

Categories

Resources