jQuery slider causing code to stop working - php

Hello fellow code ninjas, I have been playing around with this nifty jQuery price range slider
and once I implemented it, it caused my text boxes, choose image function, and Jquery drag & drop elements to stop working :(
I looked through the code and can't seem to find what went wrong.
The page I put it on is here: https://www.picklify.com/feed/beta/
And you will see the price range slider in the "Seller's Search" box at the bottom. If you view my page source you can see all the code there.
Help me from pulling out my hair, and thank you! :)

You are including jQuery.js twice in page. Second version wipes out plugins that are registered to first version which throws error since those plugin functions no longer exist. Delete second version so jQuery loads before all plugns

Below your comment <!-- BEGIN jquery price range slider -->, you are re-including jQuery and jQuery UI. Remove those references and combine the inline script in your head.

Related

JSSOR jquery and jquery.min.js on Responsive PHP page

Slider working great here, but when in a smaller format on a phone as an example, the menu will not roll back up for other items or possibly not drop down for some dropdown items.
Saw one article "bootstrap.min.css, bootstrap.min,js, and ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js not resolving" but did not see anything there to help.
Answer was to use the code found at link http://docs.sitefinity.com/for-developers-avoid-conflicts-when-loading-multiple-versions-of-jquery
below wrapper and remove one of the references to "bootstrap.min.js".

Jquery mobile t.split is not a function

I'm working on a website that gets content dynamically from a database and puts them in the HTML code, which should consist of JQuery Mobile pages so I can click a link and it will slide to the corresponding page.
I'm running JQuery 1.9.1 and JQuery Mobile 1.3.1 to get the slide effect to work, but it's giving me an error saying "t.split is not a function". It also shows a large "LOADING" text in the middle of the page without any javascript there.
Am I missing something?
Edit:
I've chosen to ignore this for now. Nobody is responding anymore and the problems are only getting worse.
I've managed to solve the question by first running a simpler version with only the essentials for making a 2 page'd JQuery Mobile example. The problem was that using only numbers for an ID isn't accepted, and I was missing the JQuery Mobile CSS file which allowed for the transition that I was looking for.
I've applied those solutions to this project and it works.

iFrame functionality with Ajax/jQuery

I need to include a small form from a reservation PHP module that I downloaded to my website. Its documentation says that it has to be included with iFrame. However the place is restricted, so the iFrame overflows when the date picker is opened and scrolling bars are shown.
To solve this, I tried using jQuery so that the div would be overflowed.
<div id="siteloader">
<script>
$(function(){
$('#siteloader').load('<?php echo base_url('booking/form_homepage.php')?>');
});
</script>
</div>
However, it results that it loads only the HTML. This is not necessary for me, since the page I want to load comes from a complete module, so I need it to be loaded complete, basically what the iFrame would do.
Is there any way to achieve this with Ajax/jQuery?
Thanks in advance

slideshow banner without using flash

I want to make a sort of repeating slideshow banner for my website, but i need some help on how to do it. The best example of what i want is on the play.com website, they have a banner that has 5 different slides, the site scrolls between them after X amount of time but the user can also click on one of the numbered buttons at the bottom of the banner to skip.
I'm thinking of doing this using HTML, CSS, JavaScript, AJAX and PHP. I have an Ajax script set up already linking to a php page that will at somepoint check through a database to get its content. But i want to output everything using lists lu and li.
So does anyone know of any tutorials or something i could use to get something like on play.com? play.com is more or less and exact match to what i want.
Thanks for the help.
You can use jQuery in combination with slideshow plugins. You don't have to do much by yourself. A plugin which does what you want can be found here:
http://slidesjs.com
You can also search Google for "jquery slideshow". This should return lots of pages with plugins.
I use http://jquery.malsup.com/cycle/ as it has a very basic fade but also lots of different animations if needed.
Unless you have a good reason for it, there's no need for you to create the slider yourself, there are tons of options already made (and tested).
I often use this two:
http://nivo.dev7studios.com/demos/
http://jquerytools.org/demos/scrollable/index.html
here is a really simple one that loops through any number of <img> elements placed inside a <div class="slideshow"> wrapper and it only uses a few lines of jQuery and css...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
hope this helps someone else

Fancy Box and Jquery Tiny Scroll Bar Prolem

I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.

Categories