Force dom reload/resize in Javascript - javascript

I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
Edit: Seems like it might be a Webkit issue. Works fine in Firefox.
Edit 2: Set up a simplified build at the following location:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.

you could just trigger a resize in your click handler, eg:
$(window).trigger('resize')

The workaround from my answer here works for your situation.
Here's a quick demo: http://jsbin.com/amakex
It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).

you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that

Related

Div follow mouse and avoid browser boundaries

I've figured how to get a div to follow a mouse, but how can I get it to reposition when the div comes close to the edge of the browser window?
For example, on Youtube, if you hover over the video makers name the div will always stay in the browser and never go off screen.
Click here, hover over Lindsey Stirling and resize your browser a few times for a live example.
Does anyone know how to do this?
Use the "title" property. This example should work fine. http://jsfiddle.net/8vj3k7zo/
<div title="no, I am 100% serious, please look at me! Oh, and try resizing the browser window.">This is some test text look at me!!!"</div>
Of course, you can't style the title tooltip, as it's part of the native browser implementation. If you'd like to get a styled div to peek over the edge of the browser, you can't do that.
On the other hand, if you would like to make sure that the entirety of the custom CSS tooltip is always inside the browser when the mouse is close to the edge (and not partially outside the bounds of the window), check out this excellent library: https://github.com/HubSpot/tooltip

How to make website scroll with the background not moving and toolbar automatically minimize?

Is there a JS for these features or how actually does it works? (Please check out the sites below)
As the user scrolls down the top toolbar minimizes and remains at the top. Also the pictures seems not to move with the scroll...
Thanks!
http://getflywheel.com/
http://www.google.com/nexus/7/
For the first example you have to set the position:fixed attribute on css for your background. An eventhandler must be check if the user had reached the bottom to display the toolbar on top of the page.
In the second example there is no fixed background but a parallanxed background here is a good example.
position:fixed for toolbar.
In first example also event handler for JS onscroll event, where check if user scrolled
enough to show toolbar

iPad javascript scrolling

I'd like to get the same behaviour of the native javascript scrollTo function in iPad, just attaching a function to the swipe event and scrolling the content a specific number of pixels. That doesn't work in iPad using scrollTo or several different jquery plugins, like scrollTo or iScroll.
I think I'm having problems because I'm working with an iframe, as I have another html document in it, with its body divided in columns, but I'm just showing the first one. The point of all this is that, after swiping, it should show the next/prev column, and I tried scrolling the iframe window or the inner's html body, which actually works in chrome, but it doesn't in iPad.
I solved the problem, but following another approach. Instead of scrolling the iframe window or the body within the iframe wit javascript, I dynamically change the css3 transform property (-webkit-transform in this case):
$(my_html).css('-webkit-transform','translateX('+leftpos+'px)');
where leftpos is the pixel (negative) where I want to locate the document.

Hiding and showing div during page scroll on iphone

Need to display an element (div) ontop of webpage. During scroll the element should disappear and reappear after scroll ends.
To add to the complexity:
our code is a guest code (thus we cannot manipulate DOM structure etc).
our code is intended to work on iPhone/iPad (mobile Safari browser)
We've tried to listen to touchstart event on document / body and hide the element (div) in our dedicated handler. However, in some sites, (when DOM structure becomes reasonably complex) the scroll response time increases significantly, even if handler implementation is entirely empty.
We are looking for the proper way to manage the element (re)appearance with a minimal affect of the user experience while scrolling.
I would think Javascript is your best solution. You can dynamically insert your DIV to any content using document.createElement, then also add some javascript to listen for onScroll...
You could even populate the DIV using custom HTML built from the native code if you want.
Any help?
I don't know if you are a jQuery user, but this .scroll() function may help you do exactly what you want to do. Check out the demo to see how it works.
http://api.jquery.com/scroll/
In recent iOS version (5.x) fixed positioning (position:fixed in CSS) is fluently supported, so that your element will be positioned on screen coordinates. That might be a good starting point for solving your troubles.

JQuery drag and drop not working in FF3.6 after I implement CSS3 flexible box layout, any ideas?

I'm experimenting with the latest CSS3 box model to enable my layout to dynamically resize as the page resizes. The problem is that in Firefox 3.6 (works perfectly in Chrome) my drag and drop gets a bug. I'm not sure if it's a firefox, Jquery or my own error? But what it looks like is the position of the cloned object i'm dragging is receiving 30px extra for pos.left.
That means that when I drop my button into the tabbed area it isn't locked properly inside the draggable area which is #page1. Rather, it seems like there is 30px of extra margin which the button is mysteriously residing in. When I drag my button to the bottom of the page, because of this 'margin' it appears to float outside of page1 and the tab content.
Moreover, if I use firebug to outline the containers, they all look properly sized (no funny overflow or anything like that). However, if I take out the box model code inside outer-container, tab-content, page1, footer and manually set the tab-content height to say, 800px then the bug goes away.
It seems to be happening here:
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
my code is here:
http://jsfiddle.net/yLCZb/5/
any ideas?? I'd love to use this box model technique if i could get it to work in FF..
I'm not a jquery guy, but it looks like your mixing & matching of doctypes is confusing FireFox. Try the vanilla HTML5 doctype declaration:
<!DOCTYPE html>
You should also lose the XHTML constructs and the "language" attribute from your <script> tag.
HTH!

Categories