Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.
Related
I found that solution, to expand all accordion sections:
http://www.bootply.com/peFUdnwOpZ
I copied the code in Joomla.
Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.
But It is not working. Can Anybody help?
Background information:
I had to add bootstrap min.js, otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.
I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.
Nothing worked.
I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:
null is not an object (evaluating '$('.closeall').click')
So, it misses the link to the other javascript files. Maybe some can help?
I believe you may have forgot to add the following piece of code in your custom js file -
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
Hope this may work for you :-)
On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/
Your javascript to init the bxSlider isn't working, it looks like you may have an errant "style" tag or something (it's trying to close a style block, the body, and the html all within your script), also make sure to include type="text/javascript" in your tag, and finally it's usually safest to do you jQuery onLoad functions like so:
jQuery(function($){
$(...).blahblah();
});
Then "$" will be scoped a bit better.
first of all you are using
<script src="myscripts.js"></script>
before loading jquery.
Please always use jquery scripts after loading jquery.min.js
also try to load the
<script src="js/jquery.bxslider.min.js"></script>
after bootstrap.js
I am trying to get the truck to drive across the screen Directly under my nav menu in Wordpress. The code executes perfectly in js fiddle , but when I try to load the JavaScript file, all I get is a still image (JavaScript is not loading)
Here is the working js fiddle:
http://jsfiddle.net/J2RPq/60/
Here is the code I applied to page.php:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script>
<div id="animate">
<img id="plane" src="http://thumb10.shutterstock.com/thumb_small/507037/507037,1274380827,2/stock-vector-black-and-white-big-rig-silhouette-53528596.jpg" /></div>
</script>
CSS
css :#animate { position: relative;}
Can someone help me with this error?
Regarding jQuery and Wordpress...
First, you should never load jQuery using the <script> tag when using Wordpress. Wordpress has it's own method for how stuff should be loaded. You can read more about there here: http://matthewruddy.com/using-jquery-with-wordpress/
Second, you may already have jQuery loaded in your Wordpress. Wordpress themes frequently already have jQuery installed, but it runs in No Conflict mode. This means that instead of using $ in your functions, you need to write out jQuery.
Hopefully that gives you a starting point troubleshoot...
You shouldn't need to load jQuery, WordPress should load a version already.
You have an extra </script> at the end of your html that doesn't appear to belong.
Make sure you place your script tag <script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script> inside of your <head> tag in header.php, try right before the line </head>.
Make sure your div is placed in page.php (assuming that's the correct template file). You should be able to see it even if the script isn't firing, and if you can't there is some other problem.
I wonder if anyone can work this HTML, CSS, Javascript puzzle out?
I'm using an #media viewport CSS declaration to detect mobile screen sizes, which minifies my website for mobile visitors, purely using CSS which is nice as I only have 1 website to update, not 2. So far so good... :)
However, in my HTML there's a line of code referencing a Javascrit file that makes this really nice 'soft scrolling' effect on the main navigational ul li a links (eg ).
This all works fine on the normal version of the site, but for some unknown reason it stops the navigation working altogether on the minified version of the site. If I delete this link to the js/softscroll.js file, then the links on the minified site work fine & I'm OK about loosing this effect on the mini version, but then... the main sites navigation stops! :< I have to have this effect for the main site btw.
So, my question is...
...Is there a way to make some kind of conditional statement, in either HTML or JavaScript (JS I imagine!), that will tell browser to only use that JavaScript (js/softscroll.js) ...IF ... the visitor is ONLY viewing the normal site, and... obviously ignore the js/softscroll.js file IF the mobile version of the site is being accessed?
Whoaw! I hope you understand what the hell I'm going on about!? Ha! Your probably wondering what I'm trying to achieve here, or why I'm so into this javascript effect? Long story, but let's just say I'm making one of those crazy side scrolling websites and it's vital! :0)
So yeh? any help welcome! Thanks for your time!
You can conditionally load a script with jQuery:
http://api.jquery.com/jQuery.getScript/
if(mainsite) $.getScript('js/softscroll.js');
UPDATE
First, when you need Javascript, you REALLY need jQuery. Best to download it and put it on your site - http://jquery.org
But here's a way that might work now:
in the head section of your app:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
Next, you need a way to know if your site is being accessed by a mobile device or not:
<script>
var platform = navigator.platform.toLowerCase();
var mobile = platform.match(/(iphone|ipod|ipad|android)/);
Then, you need to conditionally load your special script:
if(!mobile) $.getScript('js/softscroll.js');
</script>
Those six lines of code, added to the head section of your site, will probably do for now:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
var platform = navigator.platform.toLowerCase();
var mobile = platform.match(/(iphone|ipod|ipad|android)/);
if(!mobile) $.getScript('js/softscroll.js');
</script>
you can use mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/
i prefer adapt.js https://github.com/nathansmith/adapt
As Matt H (+1) correctly pointed out, you can conditionally load a script using JS.
Also, you can see an article which deals with Viewport size here.
I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.