|
HTML - How To Install Jquery On Website
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 Similar TutorialsThe instructions say to insert two chunks of code into your page. ''You just need to insert two chunks of code into your page. Place this within your HEAD section...'' (where is the head section in the INDEX.html file??, is that on the top) Here is what the code looks like. First ''chunk'' <!-- Start MegaCounter HEAD tag code --> <SCRIPT language="JavaScript"><!-- /***********************************************************\ MegaCounter v1.1 A "configurable" hit counter for the rest of us... by Joe Barta http://www.pagetutor.com/megacounter/ \***********************************************************/ text_string = "visitors since 9/5/98"; txt_color = "#000000" // Text string color counter = 587113; // Counter starts at this, revision = 1; // Every time you alter your initial counter value (above), you must also change the revision number. page_code = 1; // Unless you want every page to use the same counter, you'll need to use a different page code for each page. hitsperday = 2000; // How many hits per day you want. bg_color = "#222222" // Background color of counter fg_color = "#66FF66" // Foreground color of counter link_color = "#0000FF" // Color of link back (Powered by MegaCounter) back_color = "#FFFFFF" // Color of white space in counter area //--></SCRIPT> <SCRIPT language="JavaScript" SRC="http://www.pagetutor.com/megacounter/generic_cookie_1yr.js"></SCRIPT> <SCRIPT language="JavaScript" SRC="http://www.pagetutor.com/megacounter/megacounter.js"></SCRIPT> <!-- End MegaCounter HEAD tag code --> And here is the other ''chunk'' <!-- Start MegaCounter BODY tag code --> <SCRIPT language="JavaScript"><!-- document.write("<TABLE CELLSPACING=\"0\" CELLPADDING=\"0\" BORDER=\"0\" BGCOLOR=\"" + back_color + "\"><TR>"); document.write("<TD BGCOLOR=\"" + bg_color + "\"><FONT FACE=\"andale mono,arial\""); document.write("COLOR=\"" + fg_color + "\"><B> " + counter + "</B></FONT></TD>"); document.write("<TD><FONT SIZE=\"2\" COLOR=\"" + txt_color + "\" FACE=\"arial,helvetica\"> " + text_string + "</FONT></TD>"); document.write("</TR></TABLE>"); //--></SCRIPT> <!-- Start MegaCounter BODY tag code --> I pasted this in the index.html file, but then no counter showed up on my website. I must be doing somsthing wrong, please advise. Thank you. I am trying to use a font that isn't one of the 12 most common for pc and mac (arial, verdana, times ect.) but dont want to make everything an image. I would like to use the font on the page text. How would i go about using it? Hi, I am trying to find a way in which a website that is linked on my homepage can be opened while keeping at least one form of my homepage open as well. e.g.: Google images :http://images.google.com/imgres?imgu...en-us%26sa%3DG sorry for the massive link. Hope you get the idea. So what i want is to have a bar on top that is my homepage (like the google bar in the link), but the rest is the actual website that has been linked. I don't really care much about the url. It doesn't have to be my homepage url, it can be the actual website url. Google has been able to do that somehow, so it is possible. I would just like to know how and if it is hard to do. If someone knows how to do it, it would be great if you could give me a link to a tutorial, or explain it. thanks I have some links (in the header, the SUPPORTERS) to different websites, but when I click on them the address in the address bar does not change to the address of the website that I clicked. How do I make it show the address that I clicked on? Thanks. http://www.ac.wwu.edu/~fencing/ I am a total noob but volunteered to administrate the website, because there was no one else to do it. hello, i need a website for german customers, somethign like www.podmod.de because i would like to offer the same. So if anyone has an idea where to start, or even can offer me something i can buy, please do so. my email: verenamueller999@web.de thanks verena. Hi How to add a website counter to my website. So that when ever a visitor visits the website I want the counter to increase say from 101 to 102 and then for a new visitor it should be 103 and then again for the next visitor 104 and so on..... I want to know the code. There are number of websites that are offering this but they put their advertisement which I don't want Hi. 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. 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! 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? 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! 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/ 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>
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 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 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 I need help in adding a selected value option to a url of an html file. This is what the menu looks like: <form method="post" action="http://www.artsbrevard.org/" class="option"> <select name="ART" class="option" onchange="submit()"> <option value="">Select One</option> <option value="133" >Acrylic</option> <option value="154" >Animation/Caricature</option> <option value="160" >Calligraphy</option> ................................ ................................ </select> <input type="hidden" name="mn" value="rs"> <input type="hidden" name="action" value="artist_browse_by_cat"> </form> I need to make it so that the user has already chosen an option and convert it to a url on this page http://www.artsbrevard.org/rs/artist.html. Hello, I am trying to set up a website with no such luck. I have some experience with html however I have no idea how to create what you could call "HyperLink Boxes". Can anyone help me with settings boxes around the 6 labels within this code. it is all on a picture so I can not link the text. Code: <html>
<style type="text/css">
body { background: url(http://s1.postimage.org/g8k7foy94/Void_Craft.png) fixed center no-repeat;}
</style>
</html>
The website is hosted at Voidcraft.net with a godaddy registration and its DNS'ed to a free hosting site called 000webhost with the following allowed scripts. Mysql PHP Cron jobs CSS Can anyone with allowing me to link the images that is all 1 image while doing so invisibly? If so, thanks |
|||||||