I have been styling a predefined site, and after adding some box-shadows last night my loopedSlider has stopped working.
I have installed a clean version of the template I am using alongside. The page in question is
scorpionhosting.net
and the clean template is:
scorpionhosting.net/cleanhostpay
I've been back through the CSS, checked the html and w3c validated both to double check it wasn't something obvious (closing tags etc). I notice that the clean template is using loopedslider.min.js while my page is not. I don't understand why this is, I'm afraid I don't speak javascript very well yet!
The clean version has jQuery 1.3.2 loading:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Your new version has no jQuery.
The latest version of jQuery is 1.9.1, by the way, so I'd update for a new site. You may have trouble with your slider if you go that far, though, since 1.9 removed some deprecated methods. I'd try 1.9.1, and if it doesn't work, try 1.8.3.
Related
I'm currently updating the website http://www.dev.optiekvandevecht.nl/, I updated it from Joomla 3.3.6 to Joomla 3.4.1. Before updating to 3.4.1, a few lightbox thigns wouldn't work. Right now, I've updated Joomla, and the lightboxes work fine, however, now the nivoSlider seems to be broken (and I suppose it's got to do with jQuery errors, .nivoSlider is not a function.
I honestly don't see what is wrong, it's a Joomla module called ARI Image Slider, but I can't find anything related to the issues I run into.
I deleted an (apparently) unused extension and the problem was solved
It seems like the jquery is already included in any of the extension. Try disabling jquery in any one extension then check it. I hope it would work.
I'd like to use this multi-level push menu in my webapplication. But the problem with this plugin is that it needs an older version of jQuery. It will crash in combination with v2.x.x of jQuery.
The owner has done this on purpose, so that older browser versions are covered with the plugin as well.
So I'd like to convert/migrate this script to make it compatible with the latest version of jQuery, the only problem is, is that jQuery isn't my 'thing' (yet). I'm not sure where to start, what to remove of what to add in the script.
My question basically is, can someone point me into the right direction to get this script working with the latest version of jQuery?
I'd really really appreciate any help!
EDIT:
UPDATED ANSWER:
Use Version2 from the Multilevel Push Menu download page! ::link:: ...
I downloaded that version, and changed from jquery-1.10.2 to jquery-2.0.3 ... and it's working perfectly! Here's a jsfiddle: jsfiddle.net/vLrp51g3
PREVIOUSLY ANSWERED
As suggested by A. Wolf, you can use migrate jquery js file to handle the older jquery version. Since the remaining plugins/scripts of your webpage might require latest jquery, you could use the getScript() function to load the migrate jquery for only the pushmenu plugin! Therefore, you should probably use the code provided below for your requirement...
$(document).ready(function(){
$.getScript( "http://code.jquery.com/jquery-migrate-1.2.1.min.js", function() {
$.getScript('js/jquery.multilevelpushmenu.min.js', function() {
$('#menu').multilevelpushmenu();
});
});
});
I am using bootstrap 3 and jQuery version 1.10.2
I am also using easy commenter and they require jQuery version 1.5.2 I have tried to just keep version 1.10.2 , just keep version 1.5.2 and keep both of them. But in every case one of them does not behave as expected. With version 1.5.2 the collapsible menu in header stops working with version 1.10.2 easy commenter stops working. How should I deal with this problem?
Here is a link to the page I am working on http://8mags.com/lessons/php/phpcalendar.php
Use the newer JQuery plus the migrate plugin
The correct answer is: If the "easy commenter" plugin doesn't work with a current version of jQuery, rather than one from three years ago, you want to find a different plugin or take the existing one and modify it so that it works with the current jQuery. The differences between 1.5.2 and 1.11.2 (the current version as of this writing) aren't really all that big, and are easily updated.
If you don't want to do that (why not?), then you can use both versions of jQuery on your page, but it doubles the size of an already-large library, increasing page load time.
Here's how:
<script src="jquery-1.5.2.js"></script>
<script src="easy-commenter.js"></script>
<script>
var $old = jQuery.noConflict(true);
</script>
<script src="jquery-1.11.2.js"></script>
<!-- all your other plugins and such, including bootstrap -->
You load jQuery 1.5.2, load the easy commenter plugin, then use noConflict to release both the $ and jQuery symbols, and load jQuery 1.11.2.
When you want to use the easy commenter plugin, use $old rather than $.
We need to create a FAQ page that has a requirement that clicking the title will open up the answer.
jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.
In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.
All of our controls load from a Template, like the one below:
<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>
I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.
I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.
Is there something else out there that I can use to create this effect besides the latest jQuery?
Is there anything in HTML5? I can use that.
You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html
This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
There's also this other one that I remember adapting to my needs on a project I made about a year ago.
http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
Again, CSS3, IE will cause issues.
You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available
I believe foundation 4 may be compatible with your version of jQuery
http://foundation.zurb.com/develop/download-f4.html
http://foundation.zurb.com/docs/components/accordion.html
or
Bootstrap should work too.
http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/
http://getbootstrap.com/2.3.2/javascript.html#collapse
^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.
I prefer foundation by miles though
UPDATE
Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation
I need a help in jquery camera plugin. I downloaded the plugin from
http://www.pixedelic.com/plugins/camera/
And I placed all the necessary JavaScript files downloaded from the site in the same location :
My php program is (it does not have any php scripts although the extension is .php) in the same folder as "js" This is the html code :
<script type="text/javascript" src="js/jquery/jquery-1.10.2.js"></script>
<script type='text/javascript' src='js/jqueryCamera/scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/jqueryCamera/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/jqueryCamera/scripts/camera.min.js'></script>
<script>
$('#camera_wrap').camera();
</script>
<div id="SlideWrapper">
<div id="camera_wrap">
<div data-src="images/slider/01.jpg"></div>
<div data-src="images/slider/02.jpg"></div>
<div data-src="images/slider/03.jpg"></div>
</div>
</div>
And when I run the program it does not show the images. I have done exactly how its instructed in the website. I have not added any features and changed any parameters.
I have placed the program in the webserver and it can be viewed at :
http://store.touchmedia.ca/mytest/TestCamera01.php
Please help me to make it work...
thanks,
Isaac
I found the answer in the following link:
https://groups.google.com/forum/#!topic/camera-slideshow/AgVzZjjJ75Y
Looks like the newer JQuery version(s) do not support JQuery Camera slider, must be because of certain functions/APIs required for the slider were removed in the newer version as mentioned by Nouphal (Thank You).
I downloaded the fixed version from the above link and you can see that in
http://store.touchmedia.ca/mytest/TestCamera02.php
From this, I doubt how far can we trust the plugins which were developed by somebody whom we don't know, and when newer version(s) of JQuery is/are released then the plugin would stop working, imagine we develop a website for a customer and after a few months it stops working and we don't know how to fix the plugin and will end up throwing questions at all the forums found in the internet.
Call function when DOM gets ready.
Write:
$(document).ready(function(){
$('#camera_wrap').camera();
});
It seems that the problem is due to inconsistency between your plugin and the jQuery source file. In your example you are using the latest jQuery version i.e 1.10.2. You should always keep in mind that with each new version some of the older and inconsistent api's are removed and new ones are added. I think this plugin may be using some of the removed or deprecated methods. This plugin is however compatible till jQuery version 1.8.3. You can find the jQuery change log here or here. i have created a working example of your problem in JSBIN
I updated this plugin. It is now compatible with jquery-1.10.2 and bug free
Latest version as of 01/29/2014 available at: http://www.orangecountyseomarketing.com/projects/slider.html
http://www.orangecountyseomarketing.com/assets/js/slider/camera.js
BUGS FIXED:
Resolved latest jQuery version with .on() instead of .live();
Can still include iFrame with Video, extended size of video to 100%, video can play with any host not just vimeo or youtube
Working Pause and Play buttons.
Hope this helps.
-Yamenator-