jQuery function is unintenionally altering text content of links and affecting CSS - javascript

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/

Related

jQuery syntax added var

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.

Changing CSS on Blackberry

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.

Cufon doesn't work inside javascript

I have the following problem.
I have some text within a javascript. I want the text to look nice, so I wrapped it with "h3" which carries a cufon canvas javascript modifier, so it will look different from the normal font.
However, text within Javascript doesn't seem to be affected by cufon.
I've tried a few things to make it work, but nothing seems to work.
This is the code:
jQuery.noConflict();
jQuery(document).ready(function($) {
var author = $('#author').val();
if( author !='' && $('#email').val() !='' ) {
$('#authorData').hide();
$('#authorData').before('<div id="welcome"> <h3>Welcome back, <strong>' + author + '</strong>! Edit »</h3></div>')
$('#welcome a').toggle(
function() {
$('#authorData').show(300);
$(this).html('Minimize »');
return false;
},
function() {
$('#authorData').hide(300);
$(this).html('Edit »');
return false;
}
);
}
});
My idea is to get the whole "weclome div" into the actual php and out of the javascript code and just leave a "redirector" in the javascript, but I'm not sure if that's possible at all.
Any ideas how to make this work?
My cufon script looks like this:
Cufon.replace('h1',{hover: true})('h2')('h3')('.stepcarousel .panel .caption .title');
P.S.: It kind of works in Internet Explorer, but not in Firefox. Very weird!
Thanks a lot for any advice and suggestions! :)
cufon doesn't work if element or parent is display: none ( you are using hide() ). Use visibility hidden instead.
You appear to be appending the content after the DOM is ready. You haven't shown in your code where you actually call the Cufon.now() method, but I'm assuming it's called before your elements are appended to the DOM.
If you check the Cufon API you will see the refresh method, which can be called to do precisely that:
Cufon.refresh();
You need to call the refresh method if new text is added to the document, or even if existing text changes (e.g. font size is increased).

Need help with Cross Browser Inconsistencies in overlay

RESOLVED
I found the issue and am sorry to say it is quite idiotic. On some pages there was an extra closing bracket after the script type=javascript. Apparently Chrome and Firefox ignore the issue but Safari and IE threw up display errors. Thank you to everybody for the excellent support and guidance on the matter. of note, i decided to go with the .show() method as it seemed most logical.
I have the following javascript snippet at the top of my page which validates 2 fields within a login form:
<script type="text/javascript">
$(function() {
$('#submit').click(function () {
$('#login_form span').hide();
if ($("input#user").val() == "") {
$("span#user").show();
$("input#user").focus();
return false;
}
if ($("input#pw").val() == "") {
$("span#pw").show();
$("input#pw").focus();
return false;
}
var overlay = $('<div id="overlay">');
$('body').append(overlay);
});
});
</script>
When a form is submitted (submit is clicked) the function is run which checks to make sure the 2 fields: pw and user have some content. If they do, it opens an overlay script to cover the screen. The function above sits at the top of my screen (in the head)
The CSS for the overlay is:
#overlay { background:#000 url(../images/loader.gif) center no-repeat; opacity:0.5; filter:alpha(opacity = 50); width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; }
In Chrome:
The function works well but the 'loading' image within the overlay does not show.
In Firefox:
Nearly the same as Chrome but the loading image DOES work if the javascript call is made at the bottom of the page.
In IE:
if the function stays in the head, my page is completely blank (though no server errors). Once I move to the bottom of the page, the loading image appears randomly and if it does, it is VERY slow in its animation.
perhaps I am doing something wrong but trying to build for all three browsers on something this simple is making me bonkers.
Any suggestions for improvement?
Thanks ahead of time.
UPDATE
First off thank you all for your suggestions so far. I have tried and number and get various results from each (as well as different results when run locally versus on our apache server).
One page in particular that seems to be of fury is this one:
https://www.nacdbenefits.com/myadmin/password-reset
In IE, the page just opens to a grey screen. I have updated the code to imbed the div id in the page itself and simply 'show' on a submit but apparently something else is catching a long the way.
UPDATE 2
Something else must be causing this to malfunction. When i strip the code even to:
<script type="text/javascript">
$(function() {
});
</script>
unless I move the code to the bottom of the page, IE just shows a dark screen with nothing there (no server errors again and no JS errors at page bottom).
I would have the overlay already existant in the page's HTML but hidden (display: none;), so that the background image is preloaded. Then, once my button is clicked, I would .show() it.
I think your code has a bug. I'm suprised Firefox manages to make something out of it. According to .append() you should pass it a string or an element. You're attempting to pass it a jQuery selector result (and a broken one at that). Remember, in jQuery $() is a function call! Compare your code (condensed):
$('body').append($('<div id="overlay">'));
with this (no $() call):
$('body').append('<div id="overlay" />');
or this (note closing the div tag):
$('body').append($('<div id="overlay" />'));
Have you considered having the overlay as part of your page's code, but simply display: none by default, and then simply .show()ing it when you want it to appear?
The head/bottom-of-page inconsistency can be fixed by running your binding when the DOM is ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function () {
// code omitted for brevity
});
});
</script>

Prevent/stop auto anchor link from occurring

I need to prevent the automatic scroll-to behavior in the browser when using link.html#idX and <div id="idX"/>.
The problem I am trying to solve is where I'm trying to do a custom scroll-to functionality on page load by detecting the anchor in the url, but so far have not been able to prevent the automatic scrolling functionality (specifically in Firefox).
Any ideas? I have tried preventDefault() on the $(window).load() handler, which did not seem to work.
Let me reiterate this is for links that are not clicked within the page that scrolls; it is for links that scroll on page load. Think of clicking on a link from another website with an #anchor in the link. What prevents that autoscroll to the id?
Everyone understand I'm not looking for a workaround; I need to know if (and how) it's possible to prevent autoscrolling to #anchors on page load.
NOTE
This isn't really an answer to the question, just a simple race-condition-style kluge.
Use jQuery's scrollTo plugin to scroll back to the top of the page, then reanimate the scroll using something custom. If the browser/computer is quick enough, there's no "flash" on the page.
I feel dirty just suggesting this...
$(document).ready(function(){
// fix the url#id scrollto "effect" (that can't be
// aborted apparently in FF), by scrolling back
// to the top of the page.
$.scrollTo('body',0);
otherAnimateStuffHappensNow();
});
Credit goes to wombleton for pointing it out. Thanks!
This seems the only option I can see with ids:
$(document).ready(function() {
$.scrollTo('0px');
});
It doesn't automatically scroll to classes.
So if you identify your divs with unique classes you will lose a bit of speed with looking up elements but gain the behaviour you're after.
(Thanks, by the way, for pointing out the scroll-to-id feature! Never knew it existed.)
EDIT:
I know this is an old thread but i found something without the need to scroll. Run this first before any other scripts. It puts an anchor before the first element on the page that prevents the scroll because it is on top of the page.
function getAnchor(sUrl)
{
if( typeof sUrl == 'string' )
{
var i = sUrl.indexOf( '#' );
if( i >= 0 )
{ return sUrl.substr( i+1 ).replace(/ /g, ''); }
}
return '';
};
var s = getAnchor(window.location.href);
if( s.length > 0 )
{ $('<a name="'+s+'"/>').insertBefore($('body').first()); }
Cheers!
Erwin Haantjes
Scroll first to top (fast, no effects pls), and then call your scroll function. (I know its not so pretty)
or just use a prefix
This worked well for me:
1- put this on your css file
a[name] { position: absolute; top: 0px }
2- put this on your document.ready bind right before you start animating (if you're animating at all)
$("a[name]").css("position","relative");
Might need tweaking depending on your stylesheet/code but you get the idea.
Credit to: http://cssbeauty.com/skillshare/discussion/1882/disable-anchor-jump/

Categories

Resources