Adjust Width of Dynamically added Divs - javascript

![enter image description here][1]![My Image][2]
HTML
<div id ="data">
<div>DIV1</div>
</div>
Jquery
$(function(){
$("#button").click(function(){
$("#Data").append('<div id="mySecondDiv"></div>');
});
});
As you can See on the Image... I have one button that is adding the Divs to my Div id ="data". I just want that by default I have only one div , whose width is 100% at start, and now when I click the button it will add another and now the width of both divs will be adjusted automatically to 50%, and the functionality is goes so on
How can I achieve the adjustment of the width of the Divs?

With CSS you can use this properties:
#data {
width:100%;
display:table;
}
#data > div {
display:table-cell;
width:1%;
}
Check this Demo Fiddle

Try with this jquery:
$(function(){
var i = 1;
$("#button").click(function(){
percent = ((1/i)*100) + '%';
$("#Data").append('<div class="hello" style="width:'+ percent +'"></div>');
$('.hello').css('width',percent);
i++;
});
});

Related

Mouse leave after editing div height

When I hover over #hoverme, I want #header to change the height. But I also want it to go back to normal, once the mouse has left #hoverme.
Does anyone know how to do this? My jsfiddle doesn't seem to work as intended.
JAVASCRIPT
$(document).ready(function(){
$('#hoverme').on('mouseover', function(){
$('#header').css('height', '500px');
});
$('#header').on('mouseout', function(){
$('#header').css('height', '100px');
});
});
HTML
<div id="header">
<div id="hoverme">hover over me</div>
</div>
CSS
#header {
height:100px;
border:1px solid red;
}
At mouseout use #hoverme as well:
$(document).ready(function(){
$('#hoverme').on('mouseover', function(){
$('#header').css('height', '500px');
});
$('#hoverme').on('mouseout', function(){
$('#header').css('height', '100px');
});
});
and change the div of hoverme to a span so that not the entire line is used:
<span id="hoverme">
hover over me
</span>
The new fiddle
Not sure what you mean by "work as intended", but try this:
$(function(){
var hdr = $('#header');
hdr.mouseenter(function(){
hdr.css('height', '500px');
});
hdr.mouseleave(function(){
hdr.css('height', '100px');
});
});

Not able to select currently selected div

I'm close but no cigar.
I'm creating a "slide show" with accompanying text.
I'm able to select new photos and text but am missing something simple when it comes to selecting the navDiv which selects the photos/text.
I've created a jsfiddle but in essence its:
$('.sectionGraphics').hide(); // Hide the existing photos
$('.sectionNav div').click(function(){
$('.sectionGraphics:visible').hide(); // Hide current visible section
var selected = $(this).data('target'); // Show selected section
$('#slideShow > #'+selected).show();
$('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
//BUT NOW I WANT TO MAKE SELECTED NAV BOX WHITE AND CAN'T SEEM TO SELECT IT
if (selected=="aaa"){
$('#aaa').attr('class','').css("background-color","white");
}
// $('.sectionNav div > .'+selected).css('background-color','white');
}).first().click();
The jsfiddle is here: http://jsfiddle.net/MAYO/S63wy/6/
(I didn't upload the photos - but it shouldn't matter - I changed the size to give a visual clue.)
EDIT: Updated my jsfiddle to remove duplicate div names
You can use $(this) to get the currently clicked element.
I added these two lines:
$('.sectionNav div').css('background-color', '');
$(this).css('background-color', 'white');
http://jsfiddle.net/5gqAH/
The first line removes the background color from all of the div elements, and the second line adds it again to the current element.
I think your code could use a bit of tidying up though, the above is just an example and classes might work better. You have some duplicate ids.
Updated Fiddle
jQuery
$(function(){
$('.sectionGraphics').hide();
$('.sectionNav div').click(function(){
var nav=$(this);
$('.sectionGraphics:visible').hide(); // Hide current visible section
var selected = $(this).data('target'); // Show selected section
$('#slideShow > #'+selected).show();
$('#test').html(selected).attr('class','').addClass(selected); // Show accompanying text
//WANT TO MAKE SELECTED NAV BOX WHITE
$('.sectionNav div').removeClass('selected');
nav.addClass('selected');
// $('.section_header div > .'+selected).css('background-color','red');
// $('#slideNav4').css('background-color','red');
// $('.section_header div > #SN-'+selected).html("aaa");
}).first().click();
});
CSS
.on {
background-color: white
}
.aaa {
background-color: gray
}
.bbb {
background-color: red
}
.ccc {
background-color: blue
}
.box {
display:inline-block;
width:15px;
height:15px;
border:solid 1px #000000;
margin:2px;
background-color:#CCCCCC;
}
.box:hover, .box.selected {
background-color:#FFFFFF;
}
Within your click handler, $(this) will refer to the button (div) that has just been clicked.
Updated JSFiddle here (added lines 13–14 in JS, 21-23 in CSS)
Added JS:
$(".sectionNav div").removeClass("box-selected"); // remove the white from all buttons
$(this).addClass("box-selected"); // make the clicked button white
and added CSS:
.box-selected {
background-color: #FFFFFF;
}
To be honest I could not really understand the problem.
If you want to check which small red box was clicked then you can use $(this) as in
$(this).siblings().each(function(){ $(this).css('background-color','red') });
$(this).css('background-color','white');
$(this).siblings() bit puts all the backgrounds to red or whatever colour you want.
Let me know if that was not what you wanted.

Add div to other ID div on button click

Here I have a code that I open in modal window:
contentStr += '<div>Lorem Ispum</div><button>Add to timeline</button></div>';
$(contentStr).dialog({
modal:true
});
Now I want when I click on button Add to timeline to add: '<div id="new">place.name</div>'
into div ID bottom but with margin left var "N"
How I can do that with jquery?
assuming you meant you have a var N somwhere you want to apply it to margin left:
$('button').click(function(){
$('#bottom').append($('<div id="new">place.name</div>').css('marginLeft',N+'px'));
});
Some word of advise, this jquery is really basic, next time do some research please and show here what you found and where you struggle.
http://api.jquery.com/css/
http://api.jquery.com/append/
<style>
.marginLeft {
margin-left: Npx;
}
</style>
<script>
$.('button').click(function(){
$('div#buttom').html( $('div#buttom').html+'<div class="marginLeft" id="new">place.name</div>');
});
<script>

Changing a image for another after clicking on it with jquery

this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(
Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/
To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});
take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});
You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});

How to get the height of the div dynamically

i have 2 div's, left and right, the content in right div is setted dynamically so as its height, so i haven't specified its height in html, now what i want is the height of the left div should be equal to the right div, how to set the height of the left div as per the height of right div, using jquery, i tried
$("#leftDiv").height($("RightDiv").height());
this does not seems working, as i haven't specified the height of the right div in html.
is there any other wayout, apart from using tables.
Description
Looks like your selector for RightDiv is not right or you forgot to wait while the DOM is loaded.
Sample
Html
<div id="leftDiv" style="border:1px solid red">left div</div>
<div id="RightDiv" style="height:100px; border:1px solid red">right div</div>
jQuery
$(function() {
$("#leftDiv").height($("#RightDiv").height());
})
More Information
jSFiddle Demonstration
jQuery - .ready()
jQuery - .height()
Try this:
$("#leftDiv").height($("#RightDiv").get(0).scrollHeight);
try
var firstHeight = $("#RightDiv").height() + 'px';
$("#leftDiv").css("height", firstHeight);
$(function() {
if($("#RightDiv").height() > $("#leftDiv").height()){
$("#leftDiv").css("height", $("#RightDiv").height() + "px");
} else {
$("#rightDiv").css("height", $("#leftDiv").height() + "px");
}
}

Categories

Resources