I have the following piece of code, inspired by twitter bootstrap. It works perfectly on everything except the Blackberry Curve 8200.
It's basically to open and close navigation.
The events are triggering, the state is being picked up correctly but when I adjust css nothing happens :( I've tried adding and removing classes instead, same problem.
The collapsed element does display correctly if i add a style attribute to it manually as well.
$('[data-toggle="collapse"]').bind('click', collapse);
function collapse (e) {
var $this = $(this);
var target = $this.data('target');
var state = $this.data('state');
if ( ! state ) state = 'closed';
if ( state === 'closed' ) {
$(target).css('height', 'auto');
$this.data('state', 'open');
} else {
$(target).css('height', '0');
$this.data('state', 'closed');
}
return false;
}
It basically seems like the following line
$(target).css('height', 'auto');
just isn't doing anything. Even though the target variable is correct.
My html essentially looks like this
<style>
.nav { height: 0; }
</style>
<div data-toggle="collapse" data-target=".nav">...</div>
<div class="nav">...</div>
-update-
I was using zepto, just tried with jQuery... same problem.
Is this OS5 or OS6? If OS5, there are all sorts of defects with the browser supporting DOM re-rendering. height: auto being one of them. The solution I've used is to show them on page load, measure then cache their original height via a data-* attribute, then collapse them all. That way when it's time to show them, instead of auto I can give an exact pixel dimension.
Related
Context: I have a button on the top of the page in the header, and I want visitors to jump to the form section which is at a lower position on the same page. For some unchangeable factors, the form is partially hidden under the header after page jump, so I am thinking of creating a new div before the form and change the height of the div to push the form down after jumping. Then, when users scroll again on the page, the height should go back to 0.
Problem: When I click on the DemoButton for the first time, the div height doesn't change and the form goes under header, but the second time it works. I don't know how to fix that.
The basic html structure is shown as following:
<div>
<a href="#demoForm" id="DemoButton">
<button>request demo</button>
</a>
</div>
<div id="space"></div>
<from id="demoForm">...</form>
JavaScript:
window.onload = function comparison() {
window.addEventListener("scroll", reset, false);
var demo = document.getElementById('DemoButton');
demo.onclick = uniform;
}
function reset() {
document.getElementById('Space').style.height = '0';
}
function uniform() {
document.getElementById('Space').style.height = '160px';
};
I know a lot of people are using newer CSS for reactive headers these days. I believe it's done using media queries, and I might suggest researching it some more. (I have some experience, it was very easy and cool too.)
Ideally, you'd want something like this to happen in CSS without JavaScript at all. See if you can get it figured out that way.
Using very light Javascript, it seems the easiest thing to do would be to just offset the scroll by the height of the header once the button has been clicked. You can hard-code the header height or calculate it dynamically.
So...
;;;;;;;;;;;;;;
; $ = document ;
; id = 'getElementById' ;
;;;;;;;;;;;;;
onload = function (e)
{
$[id]('DemoButton')
. onclick = function offset(e)
{
document.body.scrollTop -= $[id]('Header').offsetHeight;
}
;
}
Notes
You may have to wrap it in a 5ms setTimeout. Easy enough.
I don't remember all the cross-browseryness. There might be a need to parseInt or use document.documentElement. But at least you don't have cross-browser scroll events to deal with now, so this should be nice.
I'm having very strange issues with some jQuery I've written, it seems to be altering the text content of links, and outputting a strange garbled mess. Reloading the page after seeing this happen results in everything rendering as expected. In addition, there are strange CSS issues that occur at the same time, with elements overflowing past their intended boundaries, which is also fixed on a refresh.
Here's a link to a screenshot of the issue. Red arrows point to the strange garbled link text, yellow arrows point to improper CSS. Inspecting the source of any of these elements will show the proper and intended CSS, as well as the correct text within the tags, even though neither is reflected in the page.
This might be a caching issue, as I can force the issue to happen when doing a ctrl+f5 refresh, and then after that hitting just f5 again displays the page as intended.
Here's the only code on my site affecting these links/their parent elements in any way
$.fn.linkHighlight = function() {
// highlight links in the sidebar when hovering in the article, and vice-versa
var selectorText = ".post-content a, .sidebar-wrap a";
$(selectorText).mouseenter(function(){
var $this = $(this);
$(selectorText).each(function(){
if( $(this).attr("href") == $this.attr("href") ) {
$(this).addClass("hover");
}
});
});
$(selectorText).mouseleave(function(){
var $this = $(this);
$(selectorText).each(function(){
if( $(this).attr("href") == $this.attr("href") ) {
$(this).removeClass("hover");
}
});
});
};
This function is being called in a standard $(document).ready(function({}));
Any help would be appreciated! If you want to see it happen on a live site, the screenshot above was taken from http://mikedettmer.com/projects/viewportunitpatch/
I needed a jQuery function to fix my div when the page is scrolled.
I found this:
var fixed = false;
var topTrigger = $('#sticker').offset().top;
$(document).scroll(function() {
if( $(this).scrollTop() >= topTrigger ) {
if( !fixed ) {
fixed = true;
$('#sticker').css({'position':'fixed', 'top':'0'});
}
} else {
if( fixed ) {
fixed = false;
$('#sticker').css({'position':'relative'});
}
}
});
Now, since I'm not a super beginner with jQuery, I tried to skim it and understand it. The only things I don't understand are the things related to the var:fixed. I tried to delete the var and the if statement related to that and the function works perfectly.
My question : why is that variable there, what does it mean, what feature does it add to the entire function?
Why should I keep it there instead of deleting everything related to that variable?
The scroll event will be fired multiple times as the user scrolls. If you keep on changing the DOM attributes, then the performance of the site may slow down.
To avoid applying the style multiple times, they are having a flag called fixed. So once the user has scrolled a particular height, they will trigger change the DOM to be fixed. Later they need not again change the CSS style.
Only if the user scrolls back less than the threshold they need to change the style again.
I have a 1440*900 monitor; a page with header, footer, and two DIVs between them (the first is my main-content DIV and the second is under it, with the same width)
I need to resize the second DIV (it uses the same background as the main-content DIV does) to feel the gap between footer and bottom of window (if there is some)
I use this code :
while($("#page").height() < wh){
$("#spacer").css('height', (parseInt($("#spacer").css('height').replace('px', '')) + 1) + 'px');
}
I use it in document-ready (jquery), but it freezes in Chrome (but not in firefox).
You could try making classes in your CSS file for your different sizes, and then just using jQuery to change the class. Might be faster.
.addClass
or
.attr('heightClass', 'whateverClassYouWant')
What's that? That code is repeated. And I wouldn't use while. I would use an event detector,
$(window).resize(function(e) {
if ($(window).height>value) {
//do stuff
}
else if ($(window).height<value) {
//do stuff
}
}
);
$(document).ready ( function(e) { //the same } );
While makes it slower. try not to use while in that ocasions, while hasn't been created for that, there are event listeners, while stays there till the condition changes or you break it.
I have a heavy-jquerized page with some links, various user inputs and such.
I use jquery, with actions defined in a
$(document).ready( function() {
....
} );
block.
But while the page is loading (or, even worse - reloading), and a user clicks a link, the href action from it is triggered, as the javascript isn't loaded / active yet.
I wanted to block it somehow. One way that came to my mind is to put a transparent div over whole document, that would receive the click events instead of the layer below it. Then, in my .ready function in javascript, I could hide that div making it possible to use the page.
Is it a good practice? Or should I try some different approach?
Another option is to use the jQuery BlockUI plugin (which probably usew the same or similar idea behind the scenes).
If you don't want your links to act like links (ie their href is never meant to followed), why make them links in the first place? You'd be better served by making your clickable elements a div or span (something without a default action), and attaching the click handler as per normal.
I'd really advise against blocking the ui with a div - it seems the entirely wrong approach, making the page non-functional to someone with JS disabled, as well as blocking other common tasks like copying text.
In light of the clarification, to block the UI only if JS is enabled, but not yet loaded, I'd suggest the following.
HTML (first thing after body):
<script type="text/javascript">document.write('<div id="UIBlocker">Please wait while we load...</div>')</script>
CSS:
#UIBlocker
{
position: fixed; /* or absolute, for IE6 */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Or, if you prefer not to use document.write, leave the UIBlocker div as straight HTML at the top of body, but have the following in head
HTML:
<noscript>
<style type="text/css">
#UIBlocker { display: none !important; }
</style>
</noscript>
This will ensure it does not block for non-JS enabled browsers
A transparent div could work, assuming it’s positioned above everything. (I’m never quite clear how visible an element has to be to receive click events.)
You might want to make the div visible though; it could be equally confusing for visitors if they can see everything on the page, but not click it.
You’ll probably need to use JavaScript to make the div as tall as the page though.
The overlay DIV should work. Another option would be to place all the content inside a hidden container visibility: hidden then toggle to visible as the last $(document).ready statement.
As you said it yourself javascript isn't loaded yet. Maybe the css isn't loaded either.
so something with visual element will not work i think. IF you want to do some with the viaual elements (css) you have to hardcode it in the html node <tagname style="blabla">
You could possibly add the href behavious in a later stadium when the js is loaded.
What you get is a <span> with a title and this should set the behaviour or something. I used a title, but can be a different attribute.
This doesn't use any jquery, only for loading
$(document).reade(function () {
relNoFollow();
});
function relNoFollow() {
var FakeLinks = document.getElementsByTagName('span');
if( FakeLinks.length > 0 ) {
for( var i = 0; i < FakeLinks.length; i++ ) {
if( FakeLinks[i].title.indexOf( 'http://' ) != -1 ) {
FakeLinks[i].onmouseout = fakelinkMouseOut;
FakeLinks[i].onmouseover = fakelinkMouseOver;
FakeLinks[i].onclick = fakelinkClick;
}
}
}
}
function fakelinkMouseOver() {
this.className = 'fakelink-hover';
}
function fakelinkMouseOut() {
this.className = 'fakelink';
}
function fakelinkClick() {
window.location.href = this.title;
}