I am using ImageFlow SEE i want to add div on Top of Image once images clicked and Slides into Center.
I tried checking js file but MoveIT() function is called so many times in js and m not able to identify ,
t.wrap('<div class="f1_card"></div>');
when should i write to wrap div around image.
Thanks,
You can use the prepend() function of jquery. You just need to select the image element and then call prepend function. See the example:
$('.target_image').prepend('<div class="f1_card"></div>');
This will be ok if you want to add an element if you want to add prior to an element. But if you want to wrap an element with a div then you have to use wrap() function.
$('.target_image').wrap('<div class="f1_card"></div>');
And obviously you have to put this code above within the click function or similar event you want. see the example:
$('.target_image').on('click', function(){
$(this).prepend('<div class="f1_card"></div>');
});
Here div with class 'f1_card' will be the parent class of your target_image element. Hope this will help you.
If you're using an animation function, perhaps you could try something like this.
$('.myimage').click(function () {
$(this).animate({
/*.do stuff...*/
}, 'slow', function (){
$(this).prepend('<div class="f1_card">my content here</div>');
});
});
This works as follows. When you click your image, it will perform your jquery animation. Once the correct animation has been performed the function will then, at the destination (in this instance, the clicked div) prepend an element. According to the API documentation this will "insert content, specified by the parameter, to the beginning of each element in the set of matched elements."
You could center the div and use z-index in css.
Related
I want to add draggable functionality on a div at runtime. The div's id is generated with the following code:
var Exp=0;
view.renderFunction = function(id1){
var id= id1 + Exp++;
$("#"+id).draggable();
};
This is my function where the id is dynamically generated when I drop div.
But when I apply the draggable method it can't move. How can I move div?
It will work, have tested this.
Make sure of the following points:
Make sure you know what is Exp++ (you haven't mentioned about it in the question)
The element on which you call draggable() is a valid DOM element.
Try calling it on document ready or DOM ready
Here is a working fiddle: http://jsfiddle.net/gopi1410/ByWCS/
Are you facing trouble with dragging itself or is the problem only with dropping it anywhere? This should be pretty straight forward. Here is a sample that shows dragging a child div from one parent div to another:
How to enable dragging a div from one parent div to another
var id= id1 + Exp++;
$("#"+id).draggable();
What is Exp++, and are you sure that you are calling .draggable() on an existing element? Also, is that renderFunction ever called with an id?
I used kinetic.js and now it working fine
This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.
I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.
How can i execute the action only on the div,when i have multiple div with same class
http://jsfiddle.net/kent93/Qw7bw/
when the mouse enter one div , the other div also will have action , how can i solve this
i want only the div that my mouse goes in take action , not the other, what best solution?
Change the selector of each position to: $(this).children(".class")
for example the code $(".fromTopToBottom") will change to $(this).children(".fromTopToBottom")
Demo: http://jsfiddle.net/Qw7bw/10/
very simple, use $(this), for example
$('.mydivclass').mouseover(function(e){
$(this).css('color','gray'); // Current element
});
If divs are nested then you should use e.stopPropagation() to stop the event bubling.
What you need is a "current" div concept.
At the beginning of mouseenter handler:
$(".trbl").removeClass("current");
$(this).addClass("current");
In your case statement, $(".fromTopToBottom").css({...}) -> $(".current .fromTopToBottom").css({...})
For the effect check out http://jsfiddle.net/Qw7bw/7/
Use $(this).find(x) rather than $(x) directly when selecting ".fromTopToBottom" and similar classes. This allows jQuery to only select childs of the hovered element http://jsfiddle.net/Qw7bw/6/
Use $(this).children(".fromTopToBottom") instead of $(".fromTopToBottom").
This will select divs of the given class inside the element whose handler you are writing.
One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/
How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.
In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.
I think you need to use $(this) inside the click function rather than $('.lol')
demo
I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.
Say i have 10 small images that i want to use as tooltips.
Im assinging them all the same class, '.helper'
Im selecting helper, then calling
mouseenter(function() { $(".helper").stop(false,true).fadeIn(); })
I then want a div to popup, containing some text. This works fine if there's only one tooltip on the page, but as soon as there is more than one, whenever i hover over one, they all appear at the same time.
Have i got something fundamentally wrong?
Comments appreciated.
Thx
Use this as the selector inside instead of the .helper selector again:
$('.helper').mouseenter(function() {
// "this" now refers to the image that is being hovered...
$(this).stop(false, true).fadeIn();
});
If you're wondering what the problem was, it was that when you called
$(".helper")
within your function, you were getting all the elements with class helper, in stead of just the single element you wanted.