Develop Reference

Why are Divs Getting Width of 0px on jQuery.show() with jQueryEasyUI

I have a parent div that is initially hidden. Inside the div I have an easyui accordion div. When I called the show() method on the parent div, the easyui div displays with a width of 0px. If the div isn't initally hidden, it calculates a width fine.
Does anyone know the proper way to initially hide a div and then when showing it calculate the proper width?
<div id='masterDiv' style='display:none;'>
<div class="easyui-accordion" style='height:475px;' data-options="border:false" >
<div title="Overview" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Checklist" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('#masterDiv').show();
});
</script>

hey i ran into the exact same problem for the exact same reason as the comment you made. I ended up doing the display:none then manually added each css change that was made. First i made the masterDiv into a class
$('.masterDiv').css("display", "block");
$('.masterDiv' .accordian).css('width', '300px);
accordian being whatever the class easyUI set to a width of 0px. It ended up being a lot of css code but it works until Jquery EasyUI can come up with something.

Why you are hiding the div, if it has to be shown after pageload ?
Did you try
document.getElementById("masterDiv").style.display="block";

JS Drag slider stops to work when container position is adjusted via jQuery

I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.
Fiddle: http://jsfiddle.net/gentrobot/9b5Xg/3/
HTML:
<div style="position:relative;width:400px;height:100px;overflow:hidden;">
<div id="1" style="width:200px;float:left;position:absolute;left:0px;">
Test
</div>
<div id="2" style="width:200px;float:left;position:absolute;left:200px;">
<!-- Drag Slider div starts -->
<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>
<!-- Drag Slider div ends -->
</div>
</div>
Click to slide
jQuery(other than JS for Dragdealer):
$('#clk').click(function(){
$('#1').animate({left:'-200px'});
$('#2').animate({left:'0px'});
});​

It works if you drag it to the right long enough, where it used to be before.
What you can have though is specifying a callback parameter that reinitializes the thing.
$('#2').animate({left:'0px'}, function(){
new Dragdealer('my-slider');
});
Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.
$('#2').animate({left:'0px'}, function(){
var t = $(this);
var random_placeholder = $('<div></div>').insertBefore(t);
$(this).insertAfter(random_placeholder);
random_placeholder.remove();
new Dragdealer('my-slider');
});

jQuery hide() not working (IE9)

I am making a div which should be hidden when the page loads, then visible once the user clicks a link. The code below works in FF / IE7 / IE8 but not in IE9, where the div is visible at all times ( without content ). Thanks in advance!
<script>
$(document).ready(function() {
$('#translateBoxen').hide();
$('#translateToggle').click(function() {
$('#translateBoxen').toggle(400);
return false;
});
});
</script> // This is the jQuery code to hide and toggle the div //
<div style="width:200px;height:100px;position:absolute;"> // Just a holder that's needed for the site
<a class="vitxtext" style="font-size:10px;" id="translateToggle" href="#">
Translate
</a>
<div style="clear:both;"></div>
<div id="translateBoxen">
// BOX CONTENT //
</div>
</div>

Why don't you hide the <div> with CSS? Just set to to display:none in your CSS, then when the toggle link is clicked for the first time it should be shown.
There is no reason why toggle() should not work in IE9, are you getting any script errors?

Late to the party, but try making a .hidden class with display:none, then hiding/showing by putting addClass('hidden') and removeClass('hidden') instead of show/hide.

Show/hide div shows the bottom of the exposed div

I have a page with two divs, one hidden and one displayed. When I click on a link at the bottom of the page, I want the hidden div to display and the displayed div to be hidden. It works fine, but if the browser height is small (e.g., on a mobile device) the user sees the div that gets displayed scrolled all the way to the bottom.
Here is the page:
<script type="text/javascript">
function display()
{
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
</script>
<!-- Start of content -->
<div id="div1" style="display:block">
<h2>This is shown at the beginning</h2>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p>
<a rel="external" href="bogus.tar.gz" onclick="display(); return true">Click here</a>
</div>
<div id="div2" style="display:none">
<h2>This is shown later</h2>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
<p>Goodbye</p><p>Goodbye</p><p>Goodbye</p>
</div>
If I put the link at the top of the page, the problem goes away, but the flow of the page demands that the link be at the bottom of the page.
So how can I get the browser to show the top of the div once it gets displayed.

window.scrollTo(x, y)
If you want to scroll the page to the top use
window.scrollTo(0, 0)
Otherwise, change the second parameter.

hide the div1 before displaying the div2.
If it does not run, use a scrollto javascript (based on displayed div) call to fix the issue

document.getElementById('div2').scrollTop=0

Add classes with Javascript rollover

I want to add a group of classes ontop of an image that only appear when the user rolls over.
Please see this as a working example:
http://www.warface.co.uk/clients/warface.co.uk/
(CLICK the red arrow at the top)
You will notice a horizontal list of images and text, desired effect will list all images and the yellow block with text will be the rollover effect.
CSS
<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt="">
The London Police</a></li>
<li><div class="project-thumb">
<div class="content">
<h2>The London Police</h2></a>
<a class="view-project">View Project</a>
</div><!--content END -->
</div><!--project-thumb END -->
</li></ul>
Could you please advise on the correct markup for the javascript replacement effect.
Many thanks

I recommend that you use a javascript library like jQuery. jQuery makes it insanely easy to do a class change on a hover event.
Add jquery in your <head> tag. Use the one from googles CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Add something like this:
<script>
$(document).ready(function() {
// find the image inside the link with the class project-thumb and add a hover event
$("a.project-thumb img").hover(
function () {
// add a class to the closest li. $(this) is the image
$(this).closest('li').addClass('theClassYouWantToAdd');
},
function () {
$(this).closest('li').removeClass('theClassYouWantToRemove');
}
);
});
</script>
Documentation for the hover event: http://api.jquery.com/hover/
That should work :)