jQuery Div inside Div - javascript

I'm trying to display a photo gallery with jQuery. This is my code:
<script>
$("#vsetky").click(function(){
$("#obrazky").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
When the #vsetky element is clicked... It works, every picture is displayed.
When the #c element is clicked, there aren't any pictures.
I tried to use
$("#obrazky > #cervene").show();
I've tried other methods but nothing is working. Help me please - what am I doing wrong?


What does your css look like? If both #obrazky and #cervene have display:none, then when you click on #c you're only removing the display:none rule from #cervene, but not it's parent wrapping div#obrazky.
Edit:
You'll want to change the css to be hiding #cervene, #zlte, and #zelene, and then show and hide those individually with the javascript. If an element's parent is has display:none, then 'show()'ing it with javascript doesn't to anything because you're not removing the display:none from the parent.
<script>
$("#vsetky").click(function(){
$("#cervene, #zlte, #zelene").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<style>
#obrazky {display:inline-block;}
#cervene, #zlte, #zelene {display:none;}
</style>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>

Related

jquery show/hide content in div without hardcoding

I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?
P.S.: "https://solomia-gera.github.io/" is the site itself if you want to have a look.
---------------------------------------------------------THE CODE-----------------------------------------------------
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content1").hide();
});
$("#mox3").on("click", function () {
$("#content1").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content1").show();
});
</script>
<!-- Hide/Show DIV2 content-->
<script>
$("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content2").hide();
});
$("#mox3").on("click", function () {
$("#content2").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content2").show();
});
</script>
<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content3").hide();
});
$("#mox1").on("click", function () {
$("#content3").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox3").on("click", function () {
$("#content3").show();
});

Given that all three have a common class mox, and if you add a common class content to each of the content divs you can do this:
$(".mox").click(function() {
$(this).children(".content").show();
$(".mox").not(this).children(".content").hide();
}
Explanation: the function is called whenever you click on any element with a mox class. this selector lets you select the particular instance of the class that was clicked, children() selects any child elements and when we put a selector as an argument for children(), it selects all child elements that match that selector. Second line works similarly, with an addition of not(this), so the second line reads hide all elements that match content class and are children of any element with class mox, but this one.
EDIT: If for some reason you do not want to assign a common class to all content divs, the following function will work as is:
$(".mox").click(function() {
$(this).children("[id^=content]").show();
$(".mox").not(this).children("[id^=content]").hide();
}
Here I used attributeStartsWith selector, read more here.

There is much better way for doing this
You can simply use the following code
$('.content').on('click', '.img-heading', function(){
$(this).parent('.content').siblings('.content').removeClass('active');
$(this).parent('.content').addClass('active');
})
Codepen link

if your content is outside mox, you can apply a same class for each element and add a data for show only what you want.
$(".mox").on("click", function () {
var content = $(".content")
content.hide();
content.eq($(this).attr("data-content")-1).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mox" data-content="1">Show one</div>
<div class="mox" data-content="2">Show two</div>
<div class="mox" data-content="3">Show three</div>
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>

try this code
$('.mox').on('click', function(){
$('.image_list').hide();
var $index = $('.mox').index(this);
$('.image_list').eq($index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
<div id="mox1" class="mox">
<p class="hide">
O<br>V<br>E<br>R<br>V<br>I<br>E<br>W
</p>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ALBUMS -->
<div id="mox2" class="mox">
<p class="">
A<br>L<br>B<br>U<br>M<br>S
</p>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ABOUT -->
<div id="mox3" class="mox">
<p class="">
A<br>B<br>O<br>U<br>T
</p>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
</div>

Based on your code:
function myCustomHide(contentIds, moxsIds){
contentIds.forEach(function(element, index) {
index !== 0 ? $("#"+element).hide(): null;
moxsIds.forEach(function(moxElem, moxIndex){
if(index !== moxIndex){
$("#"+moxElem).on("click", function(){
$("#"+element).hide();
});
}
});
$("#"+moxsIds[index]).on("click", function(){
$("#"+element).show();
});
});
}
var contentsIds = [ "content1", "content2", "content3"];
var moxsIds = [ "mox1", "mox2", "mox3"];
myCustomHide(contentsIds, moxsIds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="mox1">
Overview
</div>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ALBUMS -->
<div id="mox2">
Albums
</div>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ABOUT -->
<div id="mox3">
About
</div>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
or check the fiddle for slight different html: https://jsfiddle.net/oy7vj7fq/2/

How to hide one element inside one <div> by observing mouseover in other <div> container

<div id="one-id">
<div id="some">Info</div>
<div id="control">
<div id="value-1">
<img id="image-one-id" />
<img id="image-two-id" />
<img id="image-three-id" />
</div>
<!-- this block appears after mouseover on <img id="image-x-id" />, for each image-x-id will be loaded its own values -->
<div id="value-2">
<div id="value-one-id"></div>
<div id="value-two-id"></div>
<div id="value-three-id"></div>
</div>
</div>
</div>
<div id="two-id">
same logic as above
</div>
etc...
Step 1:<div id="value-2"> will be shown by observing mouseover event on <img id="image-x-id" /> and all values stay visible. <img id="image-x-id" /> will get class="selected".
Step 2: By mouseover <img id="image-x-id" /> inside <div id="two-id"> the <div id="value-2"> inside <div id="one-id"> must disapear and Step 1 will be repeated for <div id="two-id">.
I need a little help, because i'm lost in my nested divs.

In JS:
$('.value1').find("img").hover(function(){
var el = '.' + $(this).attr('data-target');
$('.control').find(el).hide();
$(this).closest('.control').find(el).show();
});
In Css:
.value1{
background: yellow;
}
.value2{
display: none;
background: #ccc;
}
JSFIDDLE

Getting a link from another div

I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery

$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/

<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});

jQuery: Always find next .gallery underneath image in dom-tree?

HTML
<div class="page-content">
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
<div class="something">
<img class="image" src="something alt="something">
</div>
<div class="another-div-in-there"></div>
<div class="gallery">
//stuff in there
</div>
</div>
jQuery
$(".page-content .image").each(function(i) {
//$(this).closest('.gallery') ??
});
How can I find/select the "next" or "following" .gallery for each `.image``
So when running through the each() loop I want the first gallery for the first image.
When running through the second .image I want to find the .gallery that is "underneath" the second .image in the dom-tree.
Any idea how to do so?

This plugin was written for exactly this. Disclaimer: I wrote it
http://techfoobar.com/jquery-next-in-dom/
$(".page-content .image").each(function() {
$(this).nextInDOM('.gallery');
});

$(".page-content .image").each(function() {
$(this).parent().next('.gallery');
});
Edit : For your updated question:
$(".page-content .image").each(function() {
$(this).parent().nextAll('.gallery:first');
});
See a sample here

One possible solution:
$(".page-content .image").each(function() {
$(this).parent().next(".gallery");
});
Here parent() goes up to <div class="something"> and next(".gallery") gets next sibling element with "gallery" as a class name (if exists).
For the updated question you may use .nextUntil() method:
$(this).parent().nextUntil(".gallery").next();

Image effect in website

Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.

This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/

Categories