jQuery show/hide div in body from inside another div - javascript

I have a fairly simple question (about those damn selectors!) regarding jQuery. I have 2 div's in my body that I had when the site loads. But I want them to show when a certain image is clicked. The problem is that the image is inside a few other elements (div's, ul, li).
I made this simple fiddle to show the div structure http://jsfiddle.net/MspYV/ . So the question is, how do I reach the div's #change_settings_container and .change_settings_translucent from a totally other div/element?

for the div's #change_settings_container it's as simple as $("#change_settings_container")

$("span.change_settings_close_button img").click(function(){
$('div.change_settings_translucent').hide();
});
$("span.toggle").click(function(){
$('div.change_settings_translucent, div#change_settings_container').toggle();
});
See an example here: http://jsfiddle.net/expertCode/K2znp/

<script>
$(document).ready(function () {
$(".small-image img").click(function () {
$(".main-image img").hide();
$(".small-image img").show();
var imgsrc = $(this).attr("src");
$(".main-image").addClass("img");
$(".img").css('background-image', 'url(' + imgsrc + ')');
});
});
</script>

Related

Show image title on a seperate div upon hover

I am new to jQuery and I am Trying to setup a gallery where when you hover over an image it shows the title attribute of that image on a div below and then on mouse out that title in the seperate div is hidden. Hope that makes sense!
What I have gotten so far is this
jQuery(".ngg-gallery-thumbnail-box img").each(function( index ) {
var title = jQuery(this).attr( "title" );
jQuery(".ngg-gallery-thumbnail-box img").on({
mouseenter: function () {
jQuery(".wpGallery").append(title);
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
});
In the above example the class " .ngg-gallery-thumbnail-box " is the div that holds the image ( There are multiple instances of this div one for each gallery image ). The " .wpGallery " is the class of the div to which the title should show up on upon hover.
Thanks so much in advance, Hope this makes sense!
You just need to use hover event and append your title on hover then remove it in hover out like this https://jsfiddle.net/p74pL1d1/
jQuery(".ngg-gallery-thumbnail-box img").hover(function(){
var title = jQuery(this).attr( "title" );
jQuery(".wpGallery").append(title);
},function(){
jQuery(".wpGallery").html('');
})

jQuery making only one div appear at a time

i'm trying to make divs appear and disappear by clicking on their thumbnails, but I can't figure out how to make them disappear after I make another one appear (the room variable changes its value), they just get placed after each other. The goal is to have only one div appeared at a time.
Here's my last try:
jQuery('.thumbs a').click(function () {
var room = "#room" + $(this).data('slide');
$(document).trigger('data-changed');
});
$(document).on('data-changed', function() {
$(room).toggleSlide('fast');
});
Sorry if its hard to understand.
CSS:
#wrapper div{
display:none;
}
JQuery:
jQuery('.thumbs a').click(function () {
room = "#room" + $(this).data('slide');
$(room).slideToggle('fast');
$('#wrapper').children().not(room).slideUp('fast');
});
Demo: http://jsfiddle.net/ffoa3pno/1/

How can I add my own <divs> to a container dynamically?

I found a lot of info about this, but I haven't foundanything that could help me yet.
My problem is that I have got a div with its id and it supposes to be a container (#cont_seguim).
I have a menu on the right side which contains circles (made by css and filled with text), like following:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
where b and n are the format for background and text.
When I click a circle, this one must be added to the container (notice that each circle has got its own text), but I can't get that.
I made and array and used alert() to test that click works, and it does, but append() doesn't even work to print text, and I don't know why.
<script type="text/javascript">
var arrayS = new Array();
$(document).ready(function() {
$(".circulo_menu").click(function() {
var text = $(this).text();
alert("calling " + text);
$("#cont_seguim").append(text);
});
return text;
});
</script>
Thank you for your responses!
Your code seems to work fine (if you fix the different class name used in html vs script circulo_menu vs circle_menu)
Demo at http://jsfiddle.net/7jbUj/
To add the whole circle append the whole element and not its text by using .append(this)
$(".circle_menu").click(function() {
$("#cont_seguim").append(this);
});
Demo at http://jsfiddle.net/7jbUj/1/
To add a copy of the circle, so you can add multiple of them use the .clone() first..
$(".circle_menu").click(function() {
var clone = $(this).clone(false);
$("#cont_seguim").append(clone);
});
Demo at http://jsfiddle.net/7jbUj/3/
Inside the click handler, this refers to the clicked element. And since you bind the click handler on the circle_menu element, this refers to that. You can use it directly for the appending or clone it to make a copy first..
unable to understand properly, hope below one can help you.
<script type="text/javascript">
$(document).ready(function() {
$(".circulo_menu").click(function() {
var myText = $(this).html();
alert("calling " + myText);
$("#cont_seguim").html(myText);
});
});
</script>
make sure classname and id name will remain same as html
Try using html() instead of text().
Try this: Demo
HTML:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
<div id="cont_seguim"></div>
Javascript:
$(document).ready(function() {
$(".circle_menu").click(function() {
var text = $(this).html();
console.log("calling " + text);
$("#cont_seguim").append(text);
});
});
Try this:
$( ".container" ).append( $( "<div>" ) );
source
use
$("#container").append($("<div/>", {id:"newID",text:"sometext"}));
You could try
<script type="text/javascript">
var arrayS = new Array();
$(document).ready(function() {
$(".circulo_menu").click(function() {
var text = $(this).text();
alert("calling " + text);
$("#cont_seguim").append($(this).html());
});
return text;
});
</script>
By this way the clicked circle element get added to div

jQuery Show & Hide Toggle

I have some divs that need to be hidden (class named .hideable), and some divs that need to be shown (class named .toggleable. I have it working so far, which is great, but I`m having difficulties with the following; The hidden divs (.hideable) need to come back after the toggleable divs are hidden again.
here is what I have:
jQuery(document).ready(function($) {
var topContainer = $(".toggleable");
var topButton = $(".orsp a");
topButton.click(function() {
topContainer.slideToggle('slow');
$(".hideable").hide();
});
});
all help is welcome!
thanks,
J.
Use jQuery.toggle()
$(".hideable").toggle();
instead of jQuery.hide()
I think you wnat try like this
HTML
<div style='display:none' class='hideable' >Hidden Div</div>
<div class='toggleable'>Toggleable div</div>
<input class='topButton' type='button' value='toggle'>
JS
$('.topButton').click(function() {
$('.toggleable').slideToggle('slow', function() { $(".hideable").slideToggle(); });
});
Fiddle Here
If you don't want to use toggle to hide the .hideable div you can hide it using CSS and whenever you toggle .toggleable div you can check with Jquery whether it is hidden and if it is you can change it back to be shown. However Jakub's answer is the simplest solution.
jQuery(document).ready(function($) {
var topContainer = $(".toggleable");
var topButton = $(".orsp a");
topButton.toggle(function() {
topContainer.slideToggle('slow');
$(".hideable").hide();
},function () {
topContainer.slideToggle('slow');
$(".toggleable").hide();
});
});
Simplest choose toggle or toggle class
Fiddle
<http://jsfiddle.net/gcsHg/>?

How to add fade in effect to following js script?

I have a js script that shows loading image and than loads content into #content div.
It works fine, but I cant figure out how to make it so it fades in content once it is loaded?
function viewHome(){
$('#woodheader').load("inc/home.php");
$('#content').html('<span class="loader">Loading.. <img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php");
}
For example when .load("inc/home.php"); finishes, I would like to fade in the content of inc/home.php file with duration of 3 seconds. How can I do it?
function viewHome() {
$('#woodheader').load("inc/home.php");
var content = $('#content');
content.html('<span class="loader">Loading.. " +
"<img class="loaderimg" src="images/ajax_loader.gif"/></span>');
content.load("inc/home.php", function () {
content.hide().fadeIn(3000);
});
}
Use opacity:0 from css (and filter:alpha(opacity=0) for ie) to #content
and then add $("#content").fadeIn(duration) to your function
with jquery put your code into this
$(document).ready(function() {
    // put jquery fade call in here
});
Use the jquery function
$("#element").fadeIn(350);

Categories