I hope someone here is familiar with flickerplate. It's a slider plugin for your website.
The slider works great, but somehow whenever i add a new script beneath the script that loads flickerplate and it's settings, they don't work.
Unless I put them all the way down on the bottom of my file, beneath the tag.
the issue is quite easily solved.. by putting all of my scripts above the flickerplate script. But I'm still eager to know what is causing this.
So this way it doesn't work:
<script>
<!--Execute flickerplate-->
$(document).ready(function(){
$('.flicker-example').flickerplate({
auto_flick : true,
auto_flick_delay : 8,
block_text : true,
dot_alignment : 'center',
dot_navigation : true,
flick_animation : 'transition-slide',
flick_position : 1,
theme : 'light'
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#LeftSide").hover(function(){
$("#LeftImage1").attr("src", "images/Jesse Joey James Logo2.png");
},function(){
$("#LeftImage1").attr("src", "images/Jesse Joey James Logo.png");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#RightSide").hover(function(){
$("#RightImage1").attr("src", "images/Triple-J Productions Logo2.png");
},function(){
$("#RightImage1").attr("src", "images/Triple-J Productions Logo.png");
});
});
</script>
Related
I am having a hard time integrating a jquery plugin into my Blogger theme.
The jquery library is declared already and it working with other plugins just fine
but when i am trying to put the following script it just don't work.
I tried to put it before the /head> tag and before the /body>, and i tried this one too
<script>
//<![CDATA[
//]]>
</script>
Also i tried to injected right in the layout gadget with no success so far
Here's the script
<script>
$(document).ready(function(){
$('#newsTicker4').breakingNews({
direction: 'rtl'
themeColor: '#11cbd7',
source: {
type:'rss',
usingApi:'rss2json',
rss2jsonApiKey: '5ivfzdrkuqwmoe0dgxeqvhfz0knlo7yq4fw20bt0',
url:'http://rss.cnn.com/rss/edition.rss',
limit:7,
showingField:'title',
linkEnabled: true,
target:'_blank',
seperator: '<span class="bn-seperator" style="background-image:url(img/cnn-logo.png);"></span>',
errorMsg: 'RSS Feed not loaded. Please try again.'
}
});
</script>
I'm using a jquery plug-in scrolling plug-in called smint which is working fine, but as soon as I add in a nivo slider plug-in, smint stops working. I've followed the steps i've read in order to resolve this issue but I can't seem to find a fix. Can anyone kindly help?
Here's the header code;
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('.subMenu').smint({
'scrollSpeed' : 1000
});
});
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
As yoou use noConflict() ,instead of $ sign use , jQuery. You need to include jQuery.noConflict(); once ,not twice.
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('.subMenu').smint({
'scrollSpeed' : 1000
});
});
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
I'm trying to use two(three if consider that the second uses 2 files) different plugins, jPanelMenu.js(to do a google mobile-like menu) and Superscrollorama.js(wich works together TweenMax.js), unfortunately they are conflicting, both works fine when alone, but when I put them both on the page, it all crashes. I already tried to use $.noConflict(); and jQuery.noConflict(); in a lot of different ways, unsucesfully. The best I managed to do is to make scrollorama/tweenmax work.. But, jPanelMenu still crashes.
Here's my code:
<script type="text/javascript" src="public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="public/js/jquery.jpanelmenu.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function () {
var jPM = $.jPanelMenu({
menu: '#menu',
trigger: '.menu-trigger',
easing: 'ease',
duration: 250
});
jPM.close(true);
jPM.on();
jPM.trigger(onClick);
});
</script>
<script type="text/javascript" src="public/js/TweenMax.min.js"></script>
<script type="text/javascript" src="public/js/jquery.superscrollorama.js"></script>
<script>
jQuery(document).ready(function($) {
var controller = jQuery.superscrollorama({
playoutAnimations: true
});
controller.triggerCheckAnim();
controller.addTween('.scroll-trigger',
(new TimelineLite())
.append([
// Scale Logo
TweenMax.fromTo(jQuery('#logo'), 1,
{css:{width: '100%', padding:'15px 0 0 0'}, ease:Strong.easeInOut, immediateRender:true},
{css:{width: '59%', padding:'5px 0 0 0'}, ease:Strong.easeInOut})
]),0,0);
});
</script>
I'll really really really appreciate if someone here could help me with that..
As per the additionnal details that you gave me. Your problem is not a conflict between jQuery and others, but simply that the onClick function was not defined. The trigger function open or closes the menu depending on it's state and takes a boolean argument that specifies if the action will be animated or not.
If you do not want the menu to open when the page load, simply remove the jPM.trigger(...); call.
For the love of God I need help! I'm trying to get Caroufredsel and fancybox to work together like they do here:
http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php
...bu I can only get them working independently. I don't really know javascript so I'm failing hard :(
Here is where I've tried implementing it:
http://www.meanbeangames.com/
Only Caroufredsel is working at this point. Fancybox works if I remove all Caroufredsel code.
You are referencing jQuery library twice at line 15 and 189 (view source), this caused all reference to fancybox plugin added earlier to be lost (as jQuery variable is re-defined the second time you include jQuery). Remove the
<script type="text/javascript" src="js/jquery.js"></script>
at line 189 and you should be set.
First of all:
You are loading jQuery (the Javascript library) twice. Once in your <head> section (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>) and once in before your closing </body> tag (<script type="text/javascript" src="js/jquery.js"></script>). Remove the last and update the first one to the most recent version of jQuery, like so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Second:
It might be better to give better structure to your script: or you load all of them in your head, or all of them before the closing </body> tag. This way, you won't look over scripts that are somewhere you wouldn't expect them to be. Best practice is often said to include all scripts before the closing </body> tag. Don't forget to load jQuery before all the rest of your scripts! In your case it would look like this:
<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto: false,
prev: {
button: "#foo2_prev",
key: "left"
},
next: {
button: "#foo2_next",
key: "right"
},
pagination: "#foo2_pag"
});
$('.fancybox').fancybox();
});
</script>
Not sure exactly how to do this since I am not that great at Javascript.
Here is what I would like to do: A person goes to a page as soon as the page opens a lightbox opens automatically BEFORE the page loads any other content. The person will then read the information in the lightbox and have an a few options on how they want to proceed. While they read this information the rest of the page will load in the background.
How would I go about doing this?
Thanks!
Note: I am using Fancybox for my lightbox.
I would recommend prettyPhoto, I has a cool API that allows you to open the lightbox from javascript.
Following the API documentation here you can do something like this to launch lightbox on load using JS:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$().prettyPhoto()
api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
api_titles = ['Title 1','Title 2','Title 3'];
api_descriptions = ['Description 1','Description 2','Description 3'];
$.prettyPhoto.open(api_images,api_titles,api_descriptions);
});
</script>
see my notes in this question:
jquery lightbox plugin: Bug on IE7 and IE8!
This is similar to Lynda's approach and also works fine here:
<script type="text/javascript">
//<![CDATA[
<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
$('#YourImageId').trigger('click');
});
//]]>
</script>
...
<img id="YourImageId" ...
I found this after I asked this question but I will post it here for others =>
the script below is for v1.3.0
1) inline
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
something here maybe
<div style="display: none">
<p id="mycontent">I want to display this</p>
</div>
1) external html page:
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400.
'type': 'iframe' // see this?
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="http://domain.com/page-to-display.html"
id="autostart">something here maybe ... or not</a>
If you did want to continue using fancybox at any time then here is how I managed to get fancybox to open on page load:
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function($)
{
$.fancybox({
autoScale: true,
autoDimensions: true,
transitionIn: 'fade',
transitionOut: 'fade',
scrolling: 'no',
centerOnScroll: true,
overlayShow: true,
content: $('#somediv').html(),
padding: 20
});
})(jQuery);
/*]]>*/
</script>
That's how I managed it. Useful to know even if you don't use fancybox!