I have bought dating site software called eMeeting. I tried to add a custom javascript slider to the header. The slider needs jquery library to work, but when I include the library, other scripts from the webpage stop working. But if I comment the line below (located in sliders js file)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Other javascripts from the page will work again.
I have done an example of my problem to here.
It would be really nice if someone has some time to help me or give me some suggestions. Also the webpage is http://flirt.ee
Best Regards,
Mairo
Probably a conflict with another library.
Add this right after you include jquery:
<script>$.noConflict();</script>
Related
I'm currently making a form for uploading new members to a web page. I built the form using JotForm which includes js files for controlling the style (hide/show fields, fields that are required turn red, etc.)
The js for this form worked fine on its own, but I also included a picture crop/upload as an extra. This also worked when I was testing it in a separate web page on its own, but now combined with the form, the js conflicts and I don't know how to stop that.
My script head section looks like this:
<!-- Jotform js -->
<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.10027" type="text/javascript"></script>
<script type="text/javascript">
JotForm.setConditions([{"action":[{"id":"action_0_1448505712729","visibility":"Show","isError":false,"field":"77"}],"id":"1448505521328","index":"0","link":"Any","priority":"0","terms":[{"id":"term_2_1448505712729","field":"68","operator":"equals","value":"Librarian","isError":false},{"id":"term_1448505745204","field":"68","operator":"equals","value":"Social Sec.","isError":false},{"id":"term_1448505752197","field":"68","operator":"equals","value":"Press & Publicity","isError":false},{"id":"term_1448505759596","field":"68","operator":"equals","value":"Webmaster","isError":false},{"id":"term_1448505768860","field":"68","operator":"equals","value":"Tour Manager","isError":false},{"id":"term_1448505778873","field":"68","operator":"equals","value":"Merch Rep.","isError":false},{"id":"term_1448505785856","field":"68","operator":"equals","value":"Ordinary Member","isError":false}],"type":"field"}]);
JotForm.init(function(){
setTimeout(function() {
$('input_76').hint('e.g. 1st, 2nd, 3rd');
}, 20);
JotForm.clearFieldOnHide="disable";
JotForm.onSubmissionError="jumpToSubmit";
});
</script>
<!-- Image cropper js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.cropit.js"></script>
<script src="js/index.js"></script>
Because the prototype.forms.js and jotform.forms.js appear first, they seem to work whilst the image cropper does not.
If I put the image cropper files first, the reverse happens and the image cropper works but the other javascript doesn't.
Having read up on this a lot of people talk about this being jQuery conflicts, but I'm not entirely sure what the problem/solution is. All I want is for both features to work simultaneously.
All help appreciated, thanks.
Source (image cropper working only): http://concert-band.co.uk/new/Forms/index2.php
Source (form validation working only): http://concert-band.co.uk/new/Forms/index3.php
Slightly my fault as I realised that there was no conflict with the index.js or jquery.cropit.js, it was actually some embedded jquery at the bottom of my <body> I had forgotten was there. I've now implemented jQuery.noConflict() the normal way and it works fine. Thanks for your help.
This is the first time I've tried implementing this plugin. I'm excited to use it because I think it looks great. It's nice and smooth even on mobile devices, so thank you to the developer! I'm simply not able to get the toggle/trigger to work.
I have implemented Slidebars on this site in development but the triggers (.sb-open-left, .sb-toggle-left, etc) are not triggering. I know the plugin is being called by the page because the code blocks with the classes .sb-left and .sb-right are hidden and adding the class .sb-active shows them. The site and code can be seen at development.infowest.com/passion
As previously mentioned as comment only - the slidebars weren't working because they were initialized wrapped in the inline script tag
<script type="text/javasctipt">
instead of
<script type="text/javascript">
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.
I am new to jquery. I am working on a website that uses a scroll function I found to move from page to page its scripts looks like this:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
I also have a script that I want to use on a few pages that is a type of shadowbox for an image gallery. Its script looks like this:
<script type="text/javascript"src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
If I have both scripts on the page then only the shadowbox works and the scrolling does not. If I take the shadowbox script off then the scrolling does work.
If I put the shadowbox script above the scrolling script then only the scrolling works.
I am not sure if I need to include any more information to explain my problem. From what I can tell it is these scripts that are causing the problem and conflicting with each other.
With jQuerytools, you only need to include it and you get jQuery 1.6.4 for free (read quick start, and you can remove jquery from it if you want, look below the quick start). Therefore, by including jQuery 1.3.1 above jQuery tools, you are trying to load two different versions (1.3.1 and 1.6.4) of the same toolkit, thus conflicting with each other and causing you problems.
Remove the line including jquery 1.3.1 and try that.
I had a problem with jQuery plugins clashing somehow.
So after a little research I loaded both scripts into the head of the html document, between consecutive separated script tag zones. Then I used:
window.onload = function() {function01(); function02();};
to load each function in an orderly fashion and separately.
It worked for me this time.
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.