jQuery script stops working with 1.7 - any ideas why? - javascript

I was running this script to highlight the active page in bold. I had to run jQuery 1.7 for Fancybox and now the scripts broken.
Any ideas and even better, solutions - would be much appreciated!! :)
<script type="text/javascript">
$(document).ready(function(){
var parts = window.location.pathname.split('/');
var page = parts[parts.length-1];
$('.statusBar a[href*=' + page + ']').addClass('activeBold');
});
</script>

This may not be the issue, but you should quote your attribute selectors.
$('.statusBar a[href*="' + page + '"]')

Related

Trying to use :not to select ids and have the respective slideshows turn off

This is not being recognised. I get a syntax error saying
illegal character on column 29.
When clicking any button (#c1 - #c4) the slider stops. I believe that it isn't recognising the not.
$('div.nivoSlider:not('#c' + id)').data('nivoslider').stop();
Yet to start a specific slideshow this is working.
$('#c' + id).nivoSlider({ effect: 'fade' });
I initially have slider #c1 starting on load.
Thank you.
Looking at your code, you are cutting off your string too early. (Look at the syntax highlighting colors here for the clue)
Try this:
$('div.nivoSlider:not(#c' + id + ')').data('nivoslider').stop();
People here have been so generous with their time and knowledge. thank you. I thought that I would post what I ended up doing to get this to work. I didn't need any If statements at all.
<script type="text/javascript">
var runningSlider = 1;
$('#slideButtons button').click(function(){
var newID = $(this).attr("id");
alert (newID);
alert ('test of variable ' + runningSlider);
$('#c' + runningSlider).data('nivoslider').stop();
$('#c' + newID).data('nivoslider').start();
runningSlider = newID;
});
</script>

Use link to add text to inout box

I have a table of Codes and Prices.
The "codes" are set as a link -
CODENUMBER
I have a form with the text box
When the link in the table us added I want the code to be added to the input field.
This actually works great:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
$('#code').val($('#code').val()+$(this).html()+', ');
});
});//]]>
</script>
But the site I am using a wordpress templated site that includes jquery 1.10.2 and the 1.7.1 is causing some of the "bits" of the site not to work so need the "onClick" action to work with 1.10.2 - or any other solution.....
Any help appreciated
Thanks
Try this one use on event
$('a').on('click',function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
$('#code').val($('#code').val()+$(this).html()+', ');
});
There are no issues with the version of jQuery you are using. Check out the code in the fiddle. Try and change the version of jQuery to see the results. More code and examples of your problem might help...
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val() + $(this).html() + ', ');
$('#code').val($('#code').val()+$(this).html()+', ');
});
http://jsfiddle.net/c6Q88/1/

Show content on and off with Javascript

What I want to do is, show a some content on and off using css or javascript. not jQuery, the reason is I'm having some jQuery clases and the script below doesnt render. Spent hours trying to find the reason, but couldnt.
I have 2 questions.
Question 1
Can someone help me to translate this to Javascript. A working fiddle here : Fiddle
$(document).ready(function(){
$('select').on('change',function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();
});
Question 2
Is there a way to find what's going on with website's scripts and how they render. Because Im find it hard to see whats blocking the above script. Thanks
for 1 try this :)
$('select').on('change', function() {
var val = $(this).val();
$('div[class$=claims]').hide();
$('.' + val).show();
}).change();
and 2 - use webinspector (press F12) in chrome or firebug in firefox

jscrollpane content is shown 3 times

using jscrollpane my content is duplicated 3 times.
to see what i mean go to:
http://www.facesoflyme.com/view_pets/profile/pet_webpage.php?pet_id=1676
and view the scrolling content under "Casey's Lyme Disease Journey"
here is the same page without using jscrollpanel. Notice the content is only shown one time.
use the url below to view the page that works
pet_webpage_11302010.php?pet_id=1676
If anyone can help figure out how to fix this it would be much appreciated.
It seems that you're adding this content there 3 times:
<script type="text/javascript" id="sourcecode">
$(function()
{
// Initialise the scrollpanes
$('.scroll-pane').jScrollPane();
// Add some content to #pane2
var pane2api = $('#pane2').data('jsp');
var originalContent = pane2api.getContentPane().html();
pane2api.getContentPane().html(originalContent + originalContent + originalContent);
// Reinitialise the #pane2 scrollpane
pane2api.reinitialise();
});
</script>
This line:
pane2api.getContentPane().html(originalContent + originalContent + originalContent);
The content is already there as a static HTML, the only thing you need to do is use this:
$('.scroll-pane').jScrollPane();
that will do for most of the implementations
Cheers
G.

Calling two types of jquery - issue in IE

Firefox works fine, Opera is great and Chrome works well also. IE is the issue. It seems to be ANY version of IE.
The site is http://s91532.gridserver.com and no matter where you click, it brings down our javascript menu from the top.
When you hover over the images it shows you the correct path and everything but when you click it just drops down the Ministry Index dropdown
I have removed the offending jquery which was an older version and am now just calling the site.js which is the code below:
jQuery.noConflict();
jQuery(document).ready(function(){
$('p#minguide-link a').click(function(){
if ($('#index-wrapper').is(':hidden')) {
$('#index-wrapper').slideDown('medium');
$('p#minguide-link a').addClass('down');
return false;
} else {
$('#index-wrapper').slideUp('medium');
$('p#minguide-link a').removeClass('down');
return false;
}
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
With that alone being called nothing happens. It seems that it is now fixed in IE from what I can tell.
Now how do I get site.js to be called correctly so the menu drops down correctly.
Matthew, replace the jquery 1.3 script tag for the jquery 1.4 script tag, make sure all other script tags are placed AFTER the jquery script tag ;)
I would echo the strong recommendation that you make everything work with the up-to-date version of the library, but you might try this: include the old jQuery, then right after that line add this:
<script>
jQuery.noConflict();
</script>
And then include a modified site.js file, changed as follows:
jQuery(function($) {
// existing code
});
Without any useful information (other than the link), all I can do is point you to this article:
http://codex.wordpress.org/Function_Reference/wp_enqueue_javascript/
You should be using 1.4.2. I've never ever had a single problem with it. You're calling conflicting versions of jQuery, so just use the better one.
Also, site.js isn't using jQuery in compatibility mode. You should change that first line to
jQuery(document).ready(function(){
not
$(document).ready(function(){
EDIT
Your site is running in no-conflict mode. You have to get rid of that $ at the beginning of site.js. It's throwing an error before anything happens. To fix that, all you need to do is change the very first $ to jQuery. All the other $s are fine, though.
Here's site.js in jQuery 1.4.2. Just replace the whole file's contents with this:
jQuery(document).ready(function() {
$('p#minguide-link a').click(function(){
$('#index-wrapper').slideToggle();
$('p#minguide-link a').toggleClass('down');
return false;
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
Additionally, I really suggest you look up jQuery's API. It's super easy to learn and very intuitively organized/layed out. And searching is a breeze.

Categories

Resources