I have the following HTML;
<div id="pic_options_container">
<div id="pic_options_header">header text</div>
<div id="pic_options_org"></div>
<div id="pic_options_preview"><img id="imgPreview" src="" /></div></div>
<div style="clear:both;"></div>
</div>
What I am trying to achieve is; When clicked on pic_options_container the children of that div should hide. However, pic_options_container itself also gets hidden.
$('#pic_options_container').click(function () {
$(this).children().hide();
});
Anyone know of a solution or tell me what I'm doing wrong?
Are you sure it gets hidden? I bet you it just gets "emptied" and it collapses to 0 width and height.
See this: http://jsfiddle.net/SmSGS/
You can try:
$('#pic_options_container').click(function () {
$(this).hide(); // to hide container it self, not chldren
});
DEMO
But to hide children and both container:
$('#pic_options_container').click(function () {
$(this).children().hide().end().hide(); // to hide container it self
});
DEMO
About invalid markup
<div id="pic_options_preview"><img id="imgPreview" src="" /></div></div>
an extra closing </div> in the end, correct that.
You have to give an height and width to see your 'pic_options_container' container if it doesnt has childrens or are hidded.
Related
I have a problem and I need your help. I have several links (in <aside>) leading to several different menus (in <section>). On click over the link, only the relevant div in <section> is shown, the rest are hidden. This part is ok and working. What is not working is when I click over an image:
the current div (.menu) in <section> should be hidden;
the same picture (with bigger size) should be shown;
when you click once again over the big image, the big image should disappear and the current div in .menu (the one that was hidden on the first step) should appear one more time. Sort of toggling between content.
So if I click on a picture on the "second div" content, the same picture with bigger size should be show (the "second div" content should be hidden) and when I click once again over the big picture it should disappear and the "second div" content to be returned.
I tried with toggle() but had no success. Either I did not use it correctly, or it is not suitable for my case. This is where I managed to reach to.
I will really appreaciate your support - how to show only the hidden div, not all hidden div's. Right now, when you click on the big image it did not show the hidden div.
$(window).on("load", function() {
$("div.menu:first-child").show();
});
$(".nav a").on("click", function() {
$("div.menu").fadeOut(30);
var targetDiv = $(this).attr("data-rel");
setTimeout(function() {
$("#" + targetDiv).fadeIn(30);
}, 30);
});
var pictures = $(".img-1, .img-2").on("click", function() {
$("div.menu:active").addClass("hidden");
//how to reach out only the current, active div (not all div's in .menu)?
$(".menu").hide();
var par = $("section")
.prepend("<div></div>")
.append("<img id='pic' src='" + this.src + "'>");
var removePictures = $("#pic").on("click", function() {
$(this).hide();
$(".hidden").show();
});
});
.menu {
width: 100%;
display: none;
}
.menu:first-child {
display: block;
}
.row {
display: inline-block;
width: 100%;
}
.img-1,
.img-2 {
width: 120px;
height: auto;
}
<!doctype html>
<html>
<head>
</head>
<body>
<aside>
<ul class="nav">
<li>To first div
</li>
<li>To second div
</li>
<li>To third div
</li>
</ul>
</aside>
<section>
<div class="menu" id="content1">
<h3>First Div</h3>
<div class="present">
<div class="row">
<div>
<p>Blah-blah-blah. This is the first div.</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>Blah-blah-blah. This is the first div.</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content2">
<h3>Second Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the second div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. Yjis is the second div.
</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content3">
<h3>Third Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the third div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. This is the third div.
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>
Sorry for the ugly sketch and pictures - it is only to get an idea what it should look like....
In general, it's poor form to ask on Stack Overflow how to code for a specific behavior. However, that takes some understanding of the libraries you're using, and what you are trying to achieve. Hopefully, my answer will help you better articulate and form your questions in the future.
Here's a fiddle for you: https://jsfiddle.net/hwd4b0ag/
In particular, I've modified your last click listener:
var pictures = $(".img-1, .img-2").on("click", function() {
var parentDiv = $(this).closest('div.menu').hide();
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
.appendTo("section")
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
});
Now, let's review it!
First,
var parentDiv = $(this).closest('div.menu').hide();
In a jQuery listener, the this variable stores the current javascript DOM element that is the recipient of the event listener. In your case, it refers to an element that matches ".img-1, .img-2".
.closest(selector) will traverse up the DOM (including the current element) and find the first matching element for the provided selector. In this case, it finds your container div with class menu. Then we hide that div and save a reference to it in a variable.
Next, we create a full-sized version of the picture and assign it some attributes:
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
We set the data-parent attribute to the id of our container div, so we have a reference back to it later.
We then add our image to the DOM:
.appendTo("section")
And declare a new click listener for it:
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
With $(this).attr('data-parent') we use the reference to our container div that we assigned earlier, and then retrieve that element by its id. We unhide the container div and remove the full-sized image.
All done!
There are better ways to code this, but I think this is a good next step for you that's analogous to your current code.
How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle
I'm trying to get a slidetoggle to work properly on a div. I have html in the following format:
<div class="root-div first-service">
<div class="title-div gradient">
<div class="title-div-left">
<p>$ServiceName</p>
</div>
<div class="title-div-right">
<p>▲</p>
</div>
</div>
<div class="description-div show minimum-height">
<div class="description-content-div">
$ServiceDescription
</div>
</div>
<div class="services-image-two">
<img src="themes/theinneryou/images/ServicesImage2.jpg" alt="Missing Image"/>
</div>
</div>
I also have javascript as follows:
$('.title-div').on('click', function () {
var arrow = $(this).find('.title-div-right');
if (proceed) {
proceed = false;
$(this).closest('.root-div').find('.services-image-two').slideToggle("slow");
$(this).closest('.root-div')
.find('.description-div')
.slideToggle("slow", function () {
$(arrow).text().trim().charCodeAt(0) == 9650 ? $(arrow).html('<p>▼</p>') : $(arrow).html('<p>▲</p>');
proceed = true;
});
}
});
The effect that I get is that the image itself plays the animation of slide and then gets hidden, then the rest of the next div which contains text only gets hidden without any animation. The image is overlapping the text div as I have it under absolute positioning. You can see the live demo at tiu.azularis.com/Services
Is there a way to make them gracefuly slide together when I click the arrow and then appear together when I click the down arrow?
I also tried moving the image div inside the description div and also tried setting .delay after first animation, but neither does the trick.
Change line 83 in Services.css:
.services-wrapper .expansion-wrap .first-service .minimum-height {
/* min-height: 20.4rem; */
height: 20.4rem;
}
min-height is messing it up.
Otherwise you have to fix your HTML + CSS for that whole section because it is not ideal.
I have a following code, i want to remove label and Input Box on click, but it is not working
no any alert is shown, nothing is seen over the console.. really disappointed
<div id="Div1" class="span5 well droppedFields ui-droppable ui-sortable">
<div class="draggableField ui-draggable droppedField" style="z-index: 10;" id="CTRL-DIV-1002">
<div style="z-index: 11;"><span id="LabelU2">LastName : </span></div>
<div style="z-index: 12;">
<input name="LastName" type="text" id="LastName"></div>
</div>
</div>
my jquery
$('.draggableField ui-draggable droppedField').on('click', function () {
$(this).parent('div.DivHTML').remove();
alert("hi");
});
Help is apperciable. thnx
Your selector doesn't point to anything. There is no draggableField that has a child ui-draggable that has a child droppedField. Do you mean a div that has all three classes?
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).hide();
alert("hi");
});
UPDATED CODE: Removed the OP code to remove() element and replaced with hide()
Take a look to this Fiddle
$('.draggableField').on('click', function() {
$(this).find("input").remove();
$(this).find("#LabelU2").html('');
});
you don't have DivHTML in there:
use:
$(document).ready(function(){
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).parent('div').remove();
alert("hi");
});
});
Can we see more details on your project? If it's working in jsfiddle but not in your project it seems like something else is missing. Are you loading jquery or your specific script into your html page properly? To get down to the problem we need more to go off of.
I have a div structure as follows:
<div id="showHide">
<div>Alarm</div>
<div>Alarmasdf</div>
<div>Alarmasdffasdff</div>
Is there any way that I can get the width of the content like (Alarmasdffasdff). This content is the largest.
I am able to get the length of the content, but not the width.
Please suggest.
Assuming the div elements have been changed to display: inline, the width of the element will match the content.
If this is not the case I would suggest wrapping the content in a span, or any other suitable inline element, and getting the width of that. For example:
<div id="showHide">
<div>
<span>Alarm</span>
</div>
<div>
<span>Alarmasdf</span>
</div>
<div>
<span>Alarmasdffasdff</span>
</div>
</div>
$('#showhide').find('div:last span').width();
The Width of all of your 'div's is 100% regardless of their content. This is how block level elements behave...
use :contains()
$( "#showhide div:contains('Alarmasdffasdff')").width();
As said by others, width of a block level element is 100% regardless of its content's width. So first you need to change the display of the div to inline-block
<style>
#showHide div
{
display:inline-block;
}
</style>
<div id="showHide">
<div>Alarm
</div>
<div>Alarmasdf
</div>
<div>Alarmasdffasdff
</div>
</div>
$('#showhide>div:contains("Alarmasdffasdff")').innerWidth();
Jquery makes it very easy.
$('#showHide').find('div:last').css('width');
css() returns the computed style of the element, which is the inline styling as well as default styling and any other css selector.
Without jquery it goes a little less "clean"
var mystyle = window.getComputedStyle ? window.getComputedStyle(myobject, null) : myobject.currentStyle;
mystyle.width shows the calculated width, where myobject is the element you want to check.
html :
<div id="showHide">
<div>Alarm</div>
<div>Alarmasdf</div>
<div>Alarmasdffasdff</div>
</div>
script :
var lastDiv = $('#showHide').find('div').last();
var lastDivWidth = lastDiv.width();
alert(lastDivWidth);
jsFiddle
<div id="showHide">
<div class="content" style="width:50px" >Alarm</div>
<div class="content" style="width:60px">Alarmasdf</div>
<div class="content" style="width:120px">Alarmasdffasdff</div>
</div>
Custom width is given so that u can understand the difference, else every div will be having same width, and class content is added for convinience of processing
findWidth("Alarmasdf"); // Calls the function below
function findWidth(value)
{
var width=0;
$(".content").each(function(e){
if($(this).text()==value)
{
width = $(this).width();
}
});
alert(width);
}
Check the fiddle here
http://jsfiddle.net/46LH9/