|
HTML - Jquery Question
Trying to do fading images with jquery. Found this website that is what I'm trying:
http://malsup.com/jquery/cycle/lite/ But I'm having problems. The first image just stays put and it doesn't scroll. Any help would be great! HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="images/bible.ico"/>
<title>Bayside Baptist Church - 3915 N 16th Street, Superior, WI 54880</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Bayside Baptist Church is one of many churches located in Superior, WI"/>
<meta name="robots" content="index, follow" />
<meta name="keywords" content="bayside church, superior churches, superior church, mark pavola, thomas bush, superior wi church, faith, bible, prayer, worship, christianity, jesus, christ" />
<meta name="author" content="Shane McCotter" />
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
<style type="text/css">
<!--
.style2 {
color: #D88624;
font-size: 17px;
font-weight: normal;
}
.style6 {
font-size: 11px
}
.style7 {
font-size: 12px;
}
.style9 {color: #D88624; }
.style10 {
font-size: 17px;
color: #D88624;
}
-->
</style>
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<script type="text/javascript" src="Scripts/actions.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slideshow1').cycle();
});
</script>
</head>
<body>
<div id="wrapper"><div id="padding">
<div id="header">
<div id="logo">
<h1>Bayside Baptist Church</h1>
</div>
<div id="logo2">
<h1 class="style7">Service: Sunday at 9:15am</h1>
</div>
<div id="nav">
<ul id="sddm">
<li><a href="index" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> </li>
<li><a href="ministries" onmouseover="mopen('m2')" onmouseout="mclosetime()">Ministries</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="men">Men</a>
<a href="women">Women</a>
<a href="children">Children</a>
<a href="students">Students</a>
<a href="youngadults">Young Adults</a>
<a href="senioradults">Senior Adults</a>
<a href="lifegroups">Life Groups</a>
<a href="divorcecare">DivorceCare</a>
<a href="missions">Missions</a>
<a href="outreach">Outreach</a>
<a href="ceh">Christian Education Hour</a>
</div>
</li>
<li><a href="events" onmouseover="mopen('m3')" onmouseout="mclosetime()">Calendar</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="events">Upcoming Events</a>
<a href="documents/calendar/July%20Aug%202009%20web.pdf">PDF Calendar</a>
<a href="documents/calendar/July-August%202009.pdf">PDF Newsletter</a> </div>
</li>
<li><a href="connect" onmouseover="mopen('m4')" onmouseout="mclosetime()">Connect</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="connect#prayer">Prayer</a>
<a href="connect#ya">Young Adults</a>
<a href="connect#worship">Worship Team</a>
<a href="connect#greeting">Greeting</a>
<a href="connect#children">Children's Ministry</a>
<a href="connect#martha">Martha Ministry</a>
</div>
</li>
<li><a href="story" onmouseover="mopen('m5')" onmouseout="mclosetime()">About Us</a>
<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="story">Our Story</a>
<a href="sunday">Services</a>
<a href="faq">FAQ's</a>
<a href="believe">What We Believe</a>
<a href="documents/Constitution.pdf">Our Constitution</a>
<a href="staff">Meet the Team</a>
<a href="journey">Journey of Faith</a>
</div>
</li>
<li><a href="students" onmouseover="mopen('m6')" onmouseout="mclosetime()">Students</a> </li>
<li><a href="media" onmouseover="mopen('m7')" onmouseout="mclosetime()">Media</a>
<div id="m7" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="javascript:pictures()">Pictures</a>
<a href="media">Sunday Sermons</a>
<a href="podcast">Podcasts</a>
</div>
</li>
<li><a href="contact" onmouseover="mopen('m8')" onmouseout="mclosetime()">Contact Us</a>
<div id="m8" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="contact">The Office</a>
<a href="staff">The Team</a>
<a href="http://www.facebook.com/group.php?gid=76929182727">Facebook</a>
<a href="http://www.mapquest.com/maps?city=Superior&state=WI&address=3915+N+16th+St&zipcode=54880">Directions</a>
<a href="contact#contact">Prayer Requests</a>
<a href="javascript:popup()">Invite a Friend</a>
</div>
</li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
</div>
<div id="headline">
<div style="position: relative;" id="slideshow1" class="photo">
<img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;" src="connect.gif" width="550" height="226" />
<img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;" src="flower.gif" width="550" height="226" />
<img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;" src="life2.gif" width="550" height="226" />
</div>
<div id="search-news">
<h2 class="downcast">Weekly Sermons</h2>
<div id="sermons">
<p><a href="javascript:august1609()">Aug 16 | Stay on the Path</a></p>
<p><a href="javascript:august0909()">Aug 09 | Bring on the Blessings</a></p>
<p><a href="javascript:august0209()">Aug 02 | Good Health...What's That?</a></p>
<p class="more"><a href="media">more</a></p>
</div>
<h2 class="downcast">Upcoming Events</h2>
<div id="news">
<ul>
<li>Aug 25 <a href="events#E1">4th Annual Corn Roast</a></li>
<li>SEPT 08 <a href="events#E2">Day of Prayer & Fasting</a></li>
<li>SEPT 11 <a href="events#E3">Fireproof Movie Event</a></li>
<li>SEPT 12 <a href="events#E4">Men's Prayer Breakfast</a></li>
<li>OCT 10 <a href="events#E5">Men's Prayer Breakfast</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="body">
<div id="body-left2">
<div id="body-left">
<a href="http://www.baysidesuperior.org/Sermons/force-download.php?file=08.16.09-Stay_on_the_Path.mp3"><img src="images/download.gif" alt="" class="right" /></a><a href="javascript:august1609()"><img src="images/listen.gif" alt="" class="right" /></a>
<h2 class="style2">Latest Sermon</h2>
<h1 class="style12">Stay on the Path</h1>
<p class="style7">August 16, 2009 | Pastor Mark Pavola</p>
</div>
</div>
<div id="body-right2">
<div id="body-right">
<h2 class="style2">Bayside Podcasts</h2>
<p>Receive our audio message automatically!</p>
<p><a href="itpc://www.baysidesuperior.org/podcasts/sundaysermon.xml">Suscribe</a> | <a href="podcast">Learn More</a></p>
</div>
</div>
<img src="images/sep.gif" alt="" class="right" />
<div id="body-leftbottom">
<h2 class="style2">Sunday Worship</h2>
<p class="style7">Our <a href="sunday">9:15</a> worship service combines contemporary worship music and traditional hymns with a relevant message from Scripture that has real life-changing application to provide a complete worship experience. We would enjoy having you join us on a regular basis as we seek to encourage one another to live out the truths of the Bible in our daily lives. Come as you are, you are always welcome! </p>
</div>
<div id="body-rightbottom"><a href="contact#contact"><img src="images/banners/prayer.gif" alt="" class="pic" /></a><a href="lifegroups"><img src="images/banners/life.gif" alt="" class="pic" /></a></div>
<div class="clear">
<p> </p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapper2">
<div id="footer-content">
<p><a class="style1" href="index">Home</a></p>
<p>About Us</p>
<ul>
<li><a href="story">Our Story</a></li>
<li><a href="sunday">Services</a></li>
<li><a href="faq">FAQ's</a></li>
<li><a href="believe">What We Believe</a></li>
</ul>
<p><a class="style1" href="media">Media</a></p>
<ul>
<li><a href="javascript:pictures()">Pictures</a></li>
<li><a href="media">Weekly Sermons</a></li>
<li><a href="podcast">Podcasts</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The slideshow part is in line 185: <div id="headline"> <div style="position: relative;" id="slideshow1" class="photo"> <img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;" src="connect.gif" width="550" height="226" /> <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;" src="flower.gif" width="550" height="226" /> <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;" src="life2.gif" width="550" height="226" /> </div> thanks! Similar TutorialsHi. I'm over my head. A friend's web person had an emergency, so he asked me to take over and finish his site, which had JQuery Menus. Finally, everything tested okay on MY computer, so I uploaded it. It looks okay on Firefox, but there's a big problem with IE on OTHER computers. Instead of staying in place, the menus wrap to the center and look like a vertical OL in ordinary text. The URL is http://www.trquinn.com. I feel terrible because I've made a mess of his site; any help would be sincerely appreciated. hi guys I would really appreciate any advice on this matter I am building a wesite for my boss, and when i open a page my text goes under the jquery slide show...but that happens only when I enter the site,any other page or if i refresh the page it works fine....why does it happen only once? any ideas? Hi, i'm a total noobie at coding so i am absolutely clueless and need some help. basically i need an image gallery on my website and jquery seems to be the simplest solution in doing so. i am wanting to install the pikachoose plugin as its closest to what i need. can someone link me to somewhere to show me how to do this or show me how to do this. and how would i change the individual images to my own need? i will be very grateful as i totally have no clue about coding but need to have a website running soon to showcase my work. thanks to all those that reply Hello, Is there a way to hover text over a Jquery slider? Here is what I am working with. http://chocotemplates.com/portfolio/portfolio-2/ So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form. The contact details form is mandatory. The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stays in place to avoid a big gaping white space where the right column is empty. I'm having trouble implementing this and I haven't found a solution yet or any examples of pages with this split column behaviour online. Any advice / suggestions / examples online? Thanks! I need to go to the experts here , what I need to do is the following. I have an Adobe Edge animation, I need to take that animation along with a JQuery dropdown menu and put both on one html page. I have basic html knowledge to the point where the edge animation is saved as an html page ( edge automatically does this which includes all the Javascript files separately) So far I'm able to take the edge <div> and ad it to any html page as long as I copy the scripts to the head of that page. The trouble I'm having is adding the JQuery dropdown. It would be impossible for anyone reading this to know EXACTLY wht I mean without seeing the code, I do not want to add abunch of it or add a link to the files until someone replies and can actually look. any help? RD Hello, I am using some Jquery code + CSS to display fade in and out text above each image. However, i can't figure out what I am doing wrong and the text is not being displayed when the user hovers the mouse over each image.. http://www.greekconcierge.com/group.php Any ideas? best regards, Andy Hello, I have a dialog box and in there I have a button that says New Service. When a user clicks on New Service, another dialog is shown where they the put the name of the service and after they click Create, I want that dialog box and the first one close as well. Here is my code, I can't figure it out. I want the #create-userDialog box to close after the user clicks on Create in #new-serviceDialog. HTML Code: <script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#create-userDialog" ).dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"OPEN": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
},
CLOSE: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#create-userDialog" ).dialog( "open" );
});
$( "#new-serviceDialog" ).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
onclick = $( this ).dialog( "close" );
allFields.removeClass( "ui-state-error" );
},
Close: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#new-service" )
.button()
.click(function() {
$( "#new-serviceDialog" ).dialog( "open" );
});
});
</script>
I have a jQuery plugin on my website called Facebox and it for some apparent reason when the div opens up in a small pop up window like Facebook it shows my background image of my content div. I have been working all day trying to fix this issue. When I take out the background-image from "content" div i dont have this problem but I need my content background-image to stay where it currently is. Here is the code and an example... anyone know how I can fix this? Thank HTML Code: <div class="content">
<p> <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> </p>
<div id="info" style="display:none;">
<p>Hey, I'm the 'info' div!
I look like this:</p>
</div>
</div
CSS FOR CONTENT DIV IN A SEPERATE STYLESHEET FROM FACEBOX CSS Code: .content {
width: 640px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/_backgrounds/homepage_content.jpg);
background-repeat: no-repeat;
position:relative
}
CSS FOR FACEBOX PLUGIN Code: #facebox .b {
background:url(/facebox/b.png);
}
#facebox .tl {
background:url(/facebox/tl.png);
}
#facebox .tr {
background:url(/facebox/tr.png);
}
#facebox .bl {
background:url(/facebox/bl.png);
}
#facebox .br {
background:url(/facebox/br.png);
}
#facebox {
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
border-collapse: collapse;
}
#facebox td {
border-bottom: 0;
padding: 0;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
margin: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}
#facebox_overlay {
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.facebox_hide {
z-index:-100;
}
.facebox_overlayBG {
background-color: #000;
z-index: 99;
}
* html #facebox_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
I am creating a mobile website (yes it uses script...yes i know thats not universal). Anyway. I have a picture of a car with call outs on it...the call outs all of a corresponding link below the car that is an accordion drop down. I want to be able to press on the number that has to do with say fuel tank...and have it actually open that section not just take me to where it is... test link is www.schenkhampton.com/airtex2/fueldelivery.html Any ideas would be appreciated. Matt Hi, I was wondering if it is possible to create an image that floats where ever you put it on the page. For example, it would float above this text, blocking it out. Basically I want it to ignore anything around of underneath it. I would also like it not to use scripts, if possible. Oh and one more thing, is it possible to do this between the body tags only? Thanks! Hello, I have a small customer list, maybe 70 customers, and i want to display on my website in a table with hyperlinks to their website and i want to sort them alphabetically. I entered all the information in MS excel, but when i import the data into dreamweaver cs3 i only get the names and not the hyperlink. Any ideas on how i can do this? I also don't have much knowledge on databasing, so i don't think thats an option unless its the only way, then i'll have to learn it. Thanks Question Know of any good ebooks? : I have recently purchased the resell rights to about 600 ebooks so that I can post them on my website for my registered members only. I've purchased all of these ebooks for under $20. I'm just wondering if there is any ebook out there that is actually worth the money? -- -Jonathon Byrd Publisher / Account Manager Byrd Incorporated 1230 E Clearbrook Dr. Bellingham, WA. 98229 C (360) 305.4664 F (360) 392.6861 Byrd Media Solutions http://www.ByrdMedia.com Hi there, great website! been browsing the forums and searching and havent found what i am looking for, so here goes a post. I have my own website, and I also have a webmail account with my hosting company (ixwebhosting) what i want to do is make 2 little boxes on my website, where you put username and password, and have that then take you to the ixwebhosting webmail login and go in directly to my webmail, can that be done? any ideas or links much appreciated! thanks 4 ur time! Hello people, i am a new person here, so Greetings i guess anyway i have not so much of a problem, but i need a opinion. there is a site, that has Help&Rules, and they are written in some other page on that site, and they are out-dated, so i decided to re-write them. Now, i learned some HTML at W3schools, and i think i could do a bit of Coding. Now the admin, has no knowledge of HTML or other things, and he couldnt find the Code of Help&Rules on the Server he owns, so i decided to take this way Now here is where i need your opinion, if i did the right thing. I went to the Help&Rules page i opened the Source, i copyed it in some Edit-program, did the updates, rewrite some things. Now the only way to send the code to him was throu some ingame forum mesaging system-i hope that doesent destroy the code in any way-. Now what i want to know is this. When he finds the Code Help&Rules are made of on the server, will he be able to replace it with the Code i took from the pages Source, ? or is the Source somwhat different from what the Code on the Server is. Ok, how would I go about getting a margin around several frames, but not between themselves, hence there's no gap. Say I wanted the page to fill only 75% of the height and only 50% of the width. I would then center all the framsets. If it helps, like this website has random blankness around the edge, and let's presume they're my 3 frames in the middle. Here's my code for the html file that says how big the frames will be and stuff. <html> <head> <title>Wills Music</title> </head> <frameset rows="15%,85%" border="20" frameborder="0" framespacing="0"> <frame src="title.htm" name="title" noresize scrolling="no"> <frameset cols="25%,75%" border="0" frameborder="0" framespacing="0"> <frame src="menu_bar.htm" name="sidemenu" scrolling="auto"> <frame src="welcome.htm" name="mainwindow" noresize scrolling="auto"> </frameset> </framset> <noframes> Your browser does not support frames. <a href="frameless_main.htm">Please visit the frameless page.</a> </noframes> </html> thanks, I would help other people but I'm sooo new to coding I don't know naffin' Hi. Here is my problem: I want a div layer with transparent background, but on the div-layer I want a table with no transparacy covering about 90% of the background. Is it possible to make just the background transparent or am I forced to use two layers, one for the background and one slightly smaller for the table. Parashurama can any1 plz tel me k whn we give a background image to an html file can we change its type frm tile to stretch or center? if yes, hw ? plz tel me.... I am designing a pop that only shows up for first time users to the website. This is the code for the pop up. Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
window.name = "thiswin";
newwin=open("http://www.flashgamingempire.com/popup.html", "dispwin",
"width=450,height=155,scrollbars=yes,menubar=no");
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
// -->
</SCRIPT>
Here is the code for the popup.html: Code: <div align="center"><p style="font-size:x-large">You Must Be Registered to Be Able to Win Prizes on This Site</p><div> <div align="center"><p style="font-size:medium"><a href="http://www.flashgamingempire.com/index.php?loadpage=./includes/register.php" onclick="return targetopener(this,true)">CLICK HERE TO REGISTER</a></p><div> What I want to be able to do is when the user clicks register, I want that window to close and the main window to go to the Register page. How do I do that? Any help is greatly appreciated. (My website is: http://www.flashgamingempire.com) Thanks. |
|||||||