|
JavaScript - Dynanmic Header Rotation (wordpress)
Hi guys,
I am building my second site, this time with wordpress, for a friend's restaurant. I want to use a javascript rotating banner and so I found this nice little bit of code that does the job: http://budstechshed.com/dynamic-head...rdpress-theme/ Main code Code: <?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored
function rotateHeader() {
var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif
jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
counter++; if (counter > num_images) counter = 1;
}
</script>
I have it working fine, but the code does not fade the images, which is what I require. So, is there anyway I can change this code in order to make the images fade in/out between transition? Many thanks in advance, anyone who can help and lives in Kent or London, UK can get a free curry as a thank you Similar Tutorialshow do i make a wordpress website with tabs to different sub-sections without changing pages, its almost seems like an iframe... example: http://www.alexa.com/siteinfo/google.com [look at the tabbing, and how it doesn't change URL] how can i make it like this using wordpress? is there a plugin? also, i need something that will make an iframe for me [of another website] but make it impossible to click or right-click, BUT can scroll. is there some type of plugin for wordpress that can help me do that? [so i can customize the template of the iframe and the page the holds the iframe] thanks!! (: **Solved**
I want to display a different adsence add each time my page is refreshed. How could this be acomplished? Is there existing banner rotation scripts at allow you to inser scripts instead of images and links. The scripts I need to rotate look like this. add 1 <script type="text/javascript"><!-- google_ad_client = "ca-pub-00000000000000"; /* 468x60, created 8/18/10 */ google_ad_slot = "00000000000"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> add 2 <script type="text/javascript"><!-- google_ad_client = "ca-pub-00000000000000"; /* 468x60, created 8/18/10 */ google_ad_slot = "00000000000"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order). The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds? Code: <script language="JavaScript"> images = new Array(3); images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>"; images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>"; images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> Kind regards Jon Hi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>
<script>
var interval = 4 * 1; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 1000);
};
fade();
</script>
</body>
So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! Hi, I need some help with my code for background image and title rotation! I'd like to get images one, two and three to rotate every one second, and have titles change according to the images. Currently both background and titles are not rotating.. ;-; Code:
<script>
window.onload = rotate;
var adImages = new Array('one.jpg','two.jpg','three.jpg');
var titleImages = new Array('title1','title2,'title3');
var thisAd = 0;
function rotate() {
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("picture1").style.backgroundImage = "url(adImages[thisAd])";
document.getElementById("picture1").title = titleImages[thisAd];
setTimeout("rotate()", 1 * 1000);
}
</script>
And here's my HTML Code: <div id="picture1" style="background-image:url(one.jpg);"></div> And here's my css Code: #picture1{
background-image: url(one.jpg);}
Would really appreciate any help with my request.... Im looking to setup a project for my uni assignment. its going to be a time radio site and i'm looking to create a page that has some javascript to carry out an image rotation. I want to have: - three images side by side - all images to rotate from a folder containing 100+ pictures - they all have different file names and extensions but i can change them if need be - i want the images to rotate automatically without the page having to be reloaded or mouseovers or anything - i would like them to rotate on different time frames i.e. first picture 3 sec rotation, second picture 5 seconds, third image 7 seconds.... something like that if any can help me with this i would be really grateful... iv tried scanning the web but come up short. cant use php or anything its got to be a html page using javascript. just to point out im not cheating by the way the module im doing it for is for media design not programming just cant find the code to do what i want. again thanks for everyones time cheers Hey guys, Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc. Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help. Thanks in advance! Code:
<script language="javascript">
/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/
var delay=12000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="images/simple_img_11.jpg"
randomimages[1]="images/simple_img_2.jpg"
randomimages[2]="images/simple_img_3.jpg"
randomimages[3]="images/simple_img_4.jpg"
randomimages[4]="images/simple_img_5.jpg"
randomimages[5]="images/simple_img_6.jpg"
randomimages[5]="images/simple_img_7.jpg"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
I created a drawEllipse function for a Canvas library I'm making, and it works fine in Safari, Firefox, and Chrome, but in Opera, the rotation doesn't work. The function is as follows: Code: ctx.drawEllipse = function (fill, x, y, rad1, rad2, r) {
ctx.save();
if (r) {
ctx.translate(x, y);
ctx.rotate(r);
ctx.translate(-x, -y);
}
ctx.scale(rad1, rad2);
ctx.beginPath();
ctx.arc()(x / rad1, y / rad2, 1);
ctx[fill]();
ctx.restore();
};
When I add rotation to the ellipse, in Opera, it doesn't rotate and just gets bigger. I have no idea why. Can anyone suggest anything? Thanks, Julian Hi All! I'm new to the forums but discovered this site while looking for a solution to my javascript problem. I was able to find/manipulate the following code for changing a banner when a person mouse-overs a button. It is almost exactly what I want it to do, except that I'd like the following functionality to be added to it: 1) When a person hovers over a button, the image that appears should be clickable and open a webpage. 2) I would like to have the banners cycle/rotate by default until a person hovers over a button. When they hover, it should stop the cycle/rotation. Here is an example of what the code produces prior to my desired tweaks above: http://javascript.internet.com/image...e-gallery.html Here is the code I currently have: Code: <html>
<head>
<script language="JavaScript">
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script>
</head>
<body>
<div style="margin-left: 30%;">
<table cellpadding="0" cellspacing="0" border="0" width="234">
<tr>
<td colspan="8"><img src="images/hipaa-logo.png" name="PhotoBig"></td>
</tr>
<tr>
<td colspan="8"><img src="images/w_spacer.gif" width="1" height="5"></td>
</tr>
<tr>
<td width="120"> </td>
<td width="24"><a onMouseOver="update('images/alz-logo.png', 0, false); return false;"><img src="images/button1.png"></a></td>
<td width="21"><a onMouseOver="update('images/ecomm-logo.png', 1, true); return false;"><img src="images/button2.png"></a></td>
<td width="21"><a onMouseOver="update('images/facebook-logo.png', 2, true); return false;"><img src="images/button3.png"></a></td>
<td width="21"><a onMouseOver="update('images/hipaa-logo.png', 3, true); return false;"><img src="images/button4.png"></a></td>
<td width="27"><a onMouseOver="update('images/swain-logo.png', 4, true); return false;"><img src="images/button5.png"></a></td>
</tr>
</table>
</div>
</body>
</html>
Any suggestions would be GREATLY appreciated! Thanks! jstwondrng I'm in search for a simple and clean timed rotation script. I have these quotes, and right now they're coded so that a single quote displays and changes upon refresh. The script is really clean, and I would like to maintain the cleanliness but make the images rotate every couple of seconds. Here's the script... Code: <script type="text/javascript"> quote = new Array(3); quote[0] = "Quote 1"; quote[1] = "Quote 2"; quote[2] = "Quote 3"; index = Math.floor(Math.random() * quote.length); document.write(quote[index]); </script> It's probably a really simple piece of coding, but I'm still new to JavaScript, so it's obviously out of my range. I appreciate anyone who will help i used the tutorial here (http://www.darrenhoyt.com/2008/02/12...-in-wordpress/) to install a top nav bar in my page: http://www.diveneycue.com/wordpress/ however I have two pages (http://www.diveneycue.com/wordpress/?page_id=24 and http://www.diveneycue.com/wordpress/?page_id=22 which are child) which are both child pages of the parent http://www.diveneycue.com/wordpress/?page_id=6. I thought the sub/child pages would show up in the nav bar when i hover over the parent page (Pool Cues). But alas, they do not. how do i make this happen? please advise. thanks! Hey, I need some help with a javascript code. The code works fine in a HTML editor but produces this error, "HTTP method GET is not supported by this URL" in WordPress. Problem: I can't get this URL: https://www.geonlineapply.com/servlet/MCSGenericApp to function probably in WordPress. Any suggestions would be highly appreciated! Here's the HTML code: <SCRIPT language=javascript>function callSubmit() { document.frmApplicationTermsCond.submit(); } </SCRIPT> <FORM name=frmApplicationTermsCond action=https://www.geonlineapply.com/servlet/MCSGenericApp method=post target="_blank"> <INPUT type=hidden value=N name=MCSCLIENTTEST> <INPUT type=hidden value=OR name=PRODUCTCODE> <INPUT type=hidden value=03 name=GROUPCODE> <INPUT type=hidden value=1290800802 name=MERCHANTNUMBER> <INPUT type=hidden value=http://www.hrirrigation.com name=HOMEURL> <INPUT type=hidden value=TC name=OPERATION> <INPUT type=hidden value=I name=ORIGINATIONCODE> <INPUT type=hidden value=N name=CALLBACKCODE> <INPUT type=hidden value=00 name=FRAMESIZE> <INPUT type=hidden name=DEALERIMG1> <INPUT type=hidden name=DEALERIMG2> <INPUT type=hidden name=DEALERIMG3> <INPUT type=hidden name=BOTTOMFRAME> <INPUT type=hidden name=STORELOCATOR> <INPUT type=hidden value=3E name=APPROVALTEMPLATE> <INPUT type=hidden value=#FFFFFF name=BGCOLOR> <INPUT type=hidden name=DECLINEURL></FORM> <TABLE width="32%" align="center"> <TBODY> <TR> <TD width="100%" colSpan=2> <P align=center><A href="javascript:callSubmit()"><SPAN style="FONT-SIZE: 18px; COLOR: #cc0000">Apply Now hello folks, I start modding on a new theme, that wordpress theme got a javasript that flash news. see the website : Code: http://www.casapost.biz the problem is if i want to put any post or page, in that section, so I have to do it manually, so i have to put the HTML code. My Question is how can I change that probleme, in instead of coping HTML code, just to get post automatically from a category, So any post from that category will be showen as the news flash right now. the javaScript for that file is : Code: <div id="Featured">
<script type="text/javascript">
var delay = 5000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(234,250,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 11px Geneva, Arial, Helvetica, sans-serif; padding: 10px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>News 1</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit elit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros......<br><br>Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet nec, congue non, accumsan sit amet, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
fcontent[1]="<b>News 2</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maec at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris. Duis sed assa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi......";
fcontent[2]="<b>News 3</b><br><br> Flash Info</a>";
closetag='</div>';
var fwidth='672px'; //set scroller width
var fheight='176px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid #282828; background: #ffffff; width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
</div>
Thank you, any help is welcome, i'm noob to this world Hi very good site I do a query is as follows I have this theme using jQuery and I've included a Featured Content Gallery plugin called the problem is that I have a conflict with the plugin and does not show the slider post Then I discovered that removing this line of code <? php include (TEMPLATEPATH. '/ includes / scripts.php');?> the footer if it shows the slider post but let me operate the menus, using it as the call of scritp any solution? this is the theme http://su-paginaweb.com/website/Polished2.zip thanks in advance On my wordpress based website, I have jquery for the top button selection part on the homepage, and lightbox for the gallery, and they work fine. But when I enter the url with a GET (.com?something), they don't work. I can't figure out if it is a jQuery error, or jQuery with wordpress's url structure. Ex: http://www.naturallookinstitute.com/gallery/ - OK http://www.naturallookinstitute.com/gallery?get - Lightbox broken http://www.naturallookinstitute.com/ - OK http://www.naturallookinstitute.com?get - Top header selector broken Hello! I'm developing a small application with Google Maps API for use in Wordpress and didn't want to place all the javascript into the Worpress page template file. But whenever I place the javascript that works fine in page tempalte into separate javascript file in Wordpress, all of the code using Google Maps API except the code that runs Maps itself stops working. So the Maps runs but for example Geocoder does not. I'm simulatenously using Google's jQuery API. I hope someone has experience with this and can help me. Hi, I am trying to make a Wordpress theme from this in HTML: http://www.jbiddulph.com/chrisbradshaw/ to this (wordpress blog) http://www.jbiddulph.com/blog/ Why doesn't the JavaScripts? do I need to @import them like the CSS? Hi, I'm currently the owner of www.sc2-strategy.com and I want to have javascript show/hide like one of my rivals www.sc2casts.com has, however I have no javascript knowledge and want to learn how to implement this, It makes the site look much more professional and allows for better user experience, sorry if it sounds like I don't know much, I'm just looking for help and since you guys have a very large active forum user base, I thought this would be the best place to ask, thanks. Btw, the javascript is basically meant to be used to display Game 1 (clicked) Youtube video displayed (hide button) Game 2 (display) Hidden Youtube Video etc. You'll be able to see what i mean if you go onto www.sc2casts.com |
|||||||