I'm making a simple lightbox. If you click on an image, it takes that image and shows it full screen with a black background behind it.
Here is my code:
$('.theContent img').live('click', function(e) {
var lbImg = $(this);
$('#lb').toggle();
$('#lb').find("#lbImg").append(lbImg);
)
Thing is, it takes away the variable lbImg and puts it in the lightbox. I dont want that, i just want to copy that bit of info and duplicate, rather than reposition. How would you go about that?
Use the .clone() method to copy the element:
var lbImg = $(this).clone();
Normally, when an element is re-appended, it is removed from the previous location. When an element have to be appended without removing it from the previous spot, it has to be duplicated.
Related
I have some html like this
<div id='myArea'></div>
<div id='aDifferentUnrelatedArea'></div>
<a href='#' id='closeButton' class='myButton'>Close</a>
the button has a listener like this
$('#closeButton').click(function(event){
event.preventDefault();
var myNode = document.getElementById("myArea");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
});
and I add elements to myArea like this
document.getElementById('myArea').innerHTML = 'a title';
var newElement = document.createElement('a');
newElement.setAttribute('href', "#");
newElement.appendChild(document.createTextNode('a string'));
document.getElementById('myArea').appendChild(newElement);
Before I add elements, the Close button looks fine. There's nothing to close, but my hover css is applied to it and my cursor becomes the clickable one. After I add elements to myArea like this, the button acts more like a picture and there is no click related to it (it doesn't act like an <a> tag anymore nor does it do the click event).
Sorry for the confusion but thanks for helping me find the problem. The actual problem was I had this floating footer button at the bottom of the page. It seemed to take up the whole line's functionalities (I mean anything on the same line as the button would behave like a picture). I just added extra space at the bottom of the body so nothing would be on the same line as the footer.
I'm working on something where multiple functions will add various Event listeners to an initially hidden div, let's just call it secretBlock. Only one will ever be active at any given point, but all said functions will manipulate it by:
First cloning sercetBlock to ensure no previous listeners are still attached
Then setting the display to flex
HTML:
<div id="secretBlock" hidden>Secret</div>
JavaScript:
function exampleFuction() {
var secretBlock = document.getElementById('secretBlock');
var secretClone = secretBlock.cloneNode(true);
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
....
}
but the last part, setting the display, is not firing.
I assumed this had something to do with async-ness, but
setTimeout(function(){ secretBlock.style.display = 'flex' }, 999);
also had no effect.
However, one of the functions appends the div inside of another div right after setting the display, causing it to fire properly:
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
otherDiv.appendChild(secretBlock);
After a bit of testing, I found out it doesn't matter when I set the display (now vs later) or where it is in the code, as long as secretBlock gets appended to another div, the display change will register, otherwise staying hidden.
.......which sorta left me clueless as to what's going on, any insight would thus be much appreciated~~
Was a reference issue.
After .replaceChild() replaces secretBlock, the initial reference:
var secretBlock = document.getElementById('secretBlock')
becomes obsolete as it still points to the old, original element which is not apart of the html document anymore. Thus you need to redirect the reference to the cloned element:
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock = document.getElementById('secretBlock');
secretBlock.style.display = 'flex';
Thanks Dr.Molle!
Situation:
I have ten gray divs (each with an image and text) as buttons. I want the buttons to have a darker text and darker image when active. When the active button is clicked I want it to deactivate. I also want it to deactivate when another button becomes active.
Problem:
When I replace the ending on the image sources, it changes the complete source on the images to the same as the active one... which changes all the other images to the same icon.
jsfiddle:
http://jsfiddle.net/messedUP90/gtf1dk0m/
Warning:
The jsfiddle shows the problem I am having with all the other images changing to be the same but for some reason the active image does not change color. It works fine in Dreamweaver so I am not too concerned about that.
$(document).ready(function(){
var x = 300;
$("[id^=pport]").click(function () {
var src = $('.butt', this).attr('src');
if($(this).hasClass('highlight')){
$(this).removeClass('highlight');
$('.butt', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
}
else{
$('.butt').removeClass('highlight');
$('.butt').attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
$('.talk').fadeOut(x);
$(this).addClass('highlight');
$('.butt', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1'));
}
});
});
The problem is as you describe - you are changing the src of every icon to be the src of the one you have clicked, just swapping light with dark.
I.E. early on you set var src = $('.butt', this).attr('src');
At no point do you then re-set the variable src to anything else.
You then $('.butt').attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
This sets the src attribute of all elements with the butt class to the light version of the clicked icon.
That's where your problem lies...
Instead of simply trying to change the images in one go, you need to loop over the full set:
$('.butt').each( function( index ) {
if ( $(this).attr('src') ) {
$(this).attr('src', $(this).attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1'));
}
});
Fiddle (working but with the same light / dark limitations as yours) here: http://jsfiddle.net/gtf1dk0m/1/
$('.butt').removeClass('highlight');
removes the highlight class from every element with the butt class. Likewise for the attribute replacement. You need to use $(this) instead.
I'm using a simple jQuery image slider (Owl Carousel) to show a list of speakers at a convention with photos, and I'm trying to find a way to overlay text associated with each speaker onto a div placed above the slider. I have a mockup page here. As you can see on the mockup, I have two primary divs-- i.e. div#sit and div#carousel-sit; within the former I have an container with the class .sit-quote-container into which I'd like the quote text/markup injected. I would like this overlay text to pull from the paragraph elements with the .sit-quote class that exist for each speaker.
In addition to the problem of displaying the appropriate text within the container div, I'm seeing that placing the .sit-quote paragraph within each slide is causing a gap to appear under the speaker name (the grey box underneath) and I have no idea why this is happening given that I've set .sit-quote to display:none. I'm wondering if perhaps I need to move the elements containing the quotations out of the slider markup altogether (?)
As for the actual hover function, this is what I have so far, with the help of another SO user; but it doesn't seem to be working:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container");
}, function(){
$(".sit-quote-container").html(""); // this clears the content on mouseout
});
Ultimately, I'd like the quotes to fade in/out positioned within the main div. Thanks for any assistance, and please let me know if I need to provide further clarification as to the aim here.
you should first visible that quote
try this:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
$(".sit-quote-container").html("");
});
if you want to fade in:
$(".slide-sit").hover(function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
$(".sit-quote-container").html("");
});
Use the below script to pull the text from .sit-quote p tag of the hovered item and display it in the .sit-quote-container
UPDATE
If needed wrap the quote in a para tag and to avoid complexity use a different class name, in this case .sit-quote_inner.
CSS : .sit-quote_inner{ display:none; }
JS
$('.sit-carousel-container .owl-item').hover(function(){
var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
quote = '<p class="sit-quote_inner">' + quote + '</p>';
$('.sit-header .sit-quote-container').html(quote);
$('.sit-quote_inner').fadeIn(); //Add this
},function(){
$('.sit-header .sit-quote-container').html('');
});
The carousel seems to be dynamically injecting clones of the slides. In this case, you might want to delegate your event handler so that it works with the dynamically generated slides.
Also, if you want to fadeOut the text, you should remove it in the complete callback of fafeOut instead of simply emptying the html Try
$(document).on("mouseenter",".slide-sit",function() {
var clone = $(this).find(".sit-quote").clone();
clone.appendTo(".sit-quote-container").fadeIn("slow");
});
$(document).on("mouseleave",".slide-sit", function(){
$(".sit-quote-container")
.find(".sit-quote")
.fadeOut("slow",function(){ // Fadeout and then remove the text
$(this).remove();
})
});
The gap (grey background) is the background of .slide-sit, which is visible due to the margin-bottom: 15px; applied on the paragraph containing name (style rule .item p main.css line 67 it seems), removing this will fix the issue.
Update
It'd be better if you keep a .slide-sit inside the .sit-quote-container so that you can fade it in/out properly using the below script.
$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
var content = $(this).find(".sit-quote").html();
(".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});
$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
$(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});
Interesting (and rather complex) issue here...
What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html documents) when the link is clicked, and for the background image of the link's parent div to also change. I also, however, want the parent div to automatically change back to the original class when a different link is clicked (i.e. I have two classes, 'active' and 'waiting'. When a link is clicked (and its contents subsequently displayed in the iframes) I want it to switch to class 'active'. At all other times, though, (including after a different link might be clicked and become active) I want it to go back to using the 'waiting' class.)
Here's my current code / markup:
Javascript:
function changeFrame(link) {
$('#first iframe').src=link.href;
$('#second iframe').src= (Here would be the second link, not sure how to define that)
link.ParentNode.addclass("activebutton");
HTML:
<div class="waitingbutton">
<a href="yes.html" (Somewhere here would be the second link for the second iframe) class="waitingbutton" onclick="changeFrame(this);
return false;">Button Text</a>
</div>
(After this come four more divs, each identical bar Button Text and links)
As I suspect you can tell, I'm really just guessing here. Still not hugely familiar with Javascript, hoping someone can help me out.
You seem to be using jQuery.
Here's an ugly way to do it; but it works:
Button Text
And your JavaScript:
function changeFrame(link) {
$('#first iframe').attr("src", $(link).attr('href'));
$('#second iframe').attr("src", $(link).attr('secondary-href'));
return false;
}
Note that it'd be more idiomatic jQuery to do this without any onClick handlers, but simply initialise it all in your <head>/<script> from the beginning:
<script type="text/javascript">
$(function() {
$("a.iframe-link").click(function(event) {
$("#first iframe").attr("src", $(link).attr("href"));
$("#second iframe").attr("src", $(link).attr("secondary-href"));
// Whatever used to be the activebutton, make it 'waitingbutton', and remove
// the 'activebutton' class.
$(".activebutton").
addClass("waitingbutton").
removeClass("activebutton");
// Remove .waitingbutton from this, add .activebutton.
$(this).removeClass("waitingbutton").addClass("activebutton");
// Don't allow the link's default action (to follow the href in the normal
// way).
event.preventDefault();
});
});
</script>
Then later:
<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>