JavaScript - Apple Like Product Browser

Hi all,
Just a quick question please, i'm a javascript & jquery newbie and need a little advice to what is probably an easy problem to fix.

I'm trying to get this jquery product rotator to work. It advances automatically every 5 seconds with the following code:
(there's 8 buttons below and above the main content window, clicking a button swaps the divs in the content window)


$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true);
});

All i need it to do is to advance automatically as above but also advance the slider when a user hovers/mouse over a button, so the relevant content is displayed in the main window.

The code to the whole slider is below, minus the CSS.
A demo of the slider is he
http://demo.webdeveloperplus.com/fea...ontent-slider/

Many thanks.








<!-- Links to Jquery. Do not touch -->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>

<div>
<!-- This Week's Offer Product Viewer Code Starts Here -->



<script>


$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true);
});



</script>


<center>





<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/homepage/button1.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/homepage/button2.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/homepage/button3.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/homepage/button4.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/homepage/button5.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="/homepage/button6.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-7"><a href="#fragment-1"><img src="/homepage/button7.jpg" width="187" height="125" alt="" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="/homepage/button8.jpg" width="187" height="125" alt="" /></a></li>


</ul>





<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" />

</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/about-us-main.gif" width="760" height="500" alt="" />

</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/homepage/button3.jpg" width="760" height="500" alt="" />
<div class="info" >
<center><h2>Content </h2></center>

</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/homepage/button4.jpg" width="760" height="500" alt="" />

</div>

<!-- Fifth Content -->
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" />

</div>

<!-- Sixth Content -->
<div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/homepage/button6.jpg" alt="" width="760" height="500" />

</div>

<!-- Seventh Content -->
<div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/homepage/button7.jpg" alt="" width="760" height="500" />

</div>

<!-- Third Content -->
<div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="/homepage/button8.jpg" alt="" width="760" height="500" />

</div>








</div>

I need a script that will redirect to a specific page is the browser is safari version 4. if the browser is NOT safari 4 I want the browser to stay on the current page.

Greetings,

I am currently using the websites tutorial about browser detection using the navigator.

http://www.javascriptkit.com/javatutors/navigator.shtml

I am however finding myself unable to detect a pattern in order to learn from.

My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws.

For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser.

There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose.

So if someone can explain how I could do it for Safari I would be very appreciative.

The title says it all really.

An example of the cufon breaking is when I add a product to my cart,

example here http://joemeetsjoy.com/products

When you click buy now then click ok on the pop up box the cufon breaks.

It also happens if you go the the shopping cart and choose a shipping option.

Any ideas why this happens.

Thanks

Hello Coding Forums,

I am working on building a watch app for the Pebble smartwatch that works in combination with a Bluetooth light bulb that could trigger on and off functionality. I have bits of the source code from a the same bulb project someone started from another site that is coded Java, so I imported them into cloud pebble their java library. I've been working on this since last year and I'm wondering what at all could I be doing wrong. I get the "cards" to show up, but as far as a connection to the bulbs I have not established that yet. I've attached my source code and if anyone has any time to give me some pointers that would be appreciated massively. I know that Hubble worked on a similar project, to control lighting from a pebble smartwatch so I know it can be done. I've even tested this code with other developers who are experienced and they are also wondering why the connection does not take place. It would be really neat if I got this to work.
Thank you everyone.
Attached Thumbnails  

Hello,

I have a question what is the best way to identify a browser, browser version and OS in javascript.

I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers.

Thanks

Hey, new guy here, not sure if this should be under XML, but this was my best guess.
Am working with javascript, need to pull the text content from a bunch of places on the page, then I build xml with them, and now i want to have a button that will take user to a page in the browser where all they see is the raw xml tree. Help?

Hi, i wanted to know whats wrong with this coding as its making the browser crash, firefox 5

$(document).ready(function() {

/* open rel=external in new window */
$('a[rel=external]').attr('target', '_blank');

/*Scrolling background clouds */

var offset = 600;
var offseta = 1450;

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by
// the background height minus 1
offset = offset + 1;
offseta = offseta + 1;
// apply the background position
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
{
$('#cloud2').css("background-position", offseta + "px top");
}
else {
$('#cloud').css("background-position", offset + "px top");
$('#cloud2').css("background-position", offseta + "px top");
}
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 100
);
}

// Start the animation
scrollbackground();

}); //end

Hi,

On www.pizzalita.com, I added a div layer that would ask people for an email address and if you don't like to, you camn click the cross to close that layer. This works just fine in Google Chrome but I today realized that it doesn't work for other browsers, not in IE nor in Firefox. Does anyone have any hints, suggestions and tips how to resolve this to get it working properly in all browsers?
Firefox says it can't find the function closediv() - but why not, it is there, I can look at the source and I see it.... any clues would be awesome!

Thank you very much, help is appreciated!

Ron

I have code that I've been using for awhile now that will automatically log users off my site after a period of time. It works great using a 32 bit browser but not at all with a 64 bit browser.

For the life of me I can't figure this out.

<script type='text/javascript'>
var secondsRemaining = 30;
var mhcTimer;

function countDown() {
secondsRemaining -= 1;
if (secondsRemaining <= 0) {
secondsRemaining = 0;
window.location='login.aspx';
}
}

function startAutoLogoff() {
if (mhcTimer) {
return false;
}
else
{
mhcTimer = setInterval('countDown();', 1000);
}
}

startAutoLogoff();

</script>

hey all

is there a code where I can detect if the browser is IE6 or IE7 and send them to another webpage?

my current design is not compatible with IE6 or 7 and i want to make a new page that's compatible.


thanks!

I am attempting to make an page on my website where visitors can set my website as their homepage. I am trying to make my website read which browser my visitors are using and then redirects them to the page for the right browser where I can tell them how they can set my website as their homepage.
Basically I need exactly the same thing as THIS. Could you explain to me in plain English how I can realize this.
This is what I know have:

Code:

<table width="759" border="0" align="center" cellpadding="0" cellspacing="0" >
  <tr align="center">
    <td width="378" height="28" align="right">Selecteer jouw browser   </td>
    <td width="16"></td>
    <td width="365" align="left"><form id="browserSelection" name="browserSelection" action="customizeBrowser" method="GET"><select name="browser" size="1" id="browser" onchange="document.browserSelection.submit();"><option value="ff" selected>Firefox</option><option value="ie">Internet Explorer</option><option value="chrome">Chrome</option><option value="opera">Opera</option><option value="safari">Safari</option></select></form></td>
  </tr>
</table>

________________________________________

Please tell me if I make any English mistakes in my posts. I am trying to write as perfectly possible.

Hi, I wrote some javascript for a slideshow. The main webpage contains:

Code:

<FORM NAME="myform">
  <IMG SRC="firstimage.jpg" NAME="mypic"><br>
  <INPUT TYPE="text" SIZE="180" NAME="mycaption" VALUE="First Caption">
  <INPUT TYPE="button" VALUE="Prev" NAME="prevbutton" DISABLED=true ONCLICK="slideshowBack()">
  <INPUT TYPE="button" VALUE="Next" NAME="nextbutton" ONCLICK="slideshowUp()">
</FORM>

which assigns the image and caption for the first picture, and sets the Prev and Next buttons to disabled and not disabled respectively. So you start with the first image and caption, and an enabled "Next" button.

I have global javascript variables: num (init to 1), max (init to 7), img1..7 (new Image ()), img1..7.src (filenames for the images), text1..7 (captions for the images), map1..7 (maps for the images).

The function for moving to the next slide is:

Code:

function slideshowUp()
{
num=num+1
if (num==max+1)
{num=1}
document.mypic.src=eval("img"+num+".src")
document.getElementById("mypic").useMap=eval("map"+num)
document.myform.mycaption.value=eval("text"+num)
document.getElementById("prevbutton").disabled=(num==1)
document.getElementById("nextbutton").disabled=(num==max)
}

I developed this in HMTLPad (10.2) and it works perfectly in that program's preview mode. But it won't work in the main browsers!

In IE 9 (9.0.33), when you click the Next button, nothing at all happens. Image and caption stay the same, Next stays enabled, Prev stays disabled. Maps don't work.

Chrome (38.0.2125.122 m) and Firefox (27.0) behave like each other. The images change, but not the captions or the Prev/Next buttons. Maps don't work.

Is this to be expected? If so, how do I work around it?

Hello, I couldn't find another thread that had this problem but it seems like it would be fairly simple. I am also just now starting to learn JavaScript.

But when I enter this code into Notepad++
Code:

<HTML>
<HEAD>
</HEAD>
<BODY>

<SCRIPT type = "text/javascript">

	document.write("Hello World");

</SCRIPT>

</BODY>
</HTML>

Instead of printing out "Hello World" as it should, it simply shows me the code I wrote line for line. I have tried opening in both Chrome and IE and since all other webpages work fine I assume that both browsers have javascript enabled.

Thanks in advance

Hello all,

I've got a cross browser issue with two javascript codes I'm using within a website: http://www.thewursteditions.com

Someone just pointed out today that they don't see my gallery (galleria javascript) nor my rollover on the size guide.

The site works great on the iphone, firefox, and safari, but not in Internet Explorer.

I really have no idea what the issue could be as I don't do this too often but I would greatly appreciate any of your help!

Thanks