|
JavaScript - Page Breaks When I Resize - Jquery Body Height
I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already.
In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass. The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them. It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks. This is my script: Code: <script type="text/javascript">
$(document).ready( function() {
stretch_portal_content();
$(window).resize( stretch_portal_content );
});
function stretch_portal_content() {
// if the body isn't at least as big as the user's window - force it to be
if( $(window).height() > $('body').height() ) {
$( '#wrapper' ).height(
$(window).height() - ( $('body').height() - $('#wrapper').height() )
);
}
// if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom
if( $(window).height() < $('#wrapper').height() ) {
$( '#wrapper' ).css("padding-bottom", '130px');
}
}
</script>
I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it! Similar TutorialsHi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div. Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div) I need to manipulate ( subtract the height value of the header) in the javascript somehow. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}
function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>
<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">
<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">
<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>
<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>
<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>
</div> <!--end of wrapper-->
</body>
</html>
Thanks hi, how can i write this if/ else condition in jquery?? if window resize, run this code, Code: $(window).resize(function(){
var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
$('#back').click(function () {
$('#container').animate({marginLeft:'0px'}, 600);
return false;
});
});
else run this, Code: var height_window = $(window).height();
var width_window = $(window).width();
var margin_left = (width_window/2) - (840/2);
$('.slide').css({width:width_window+'px'});
$('.content').css({marginLeft:margin_left+'px'});
$('#enter').click(function () {
$('#container').animate({marginLeft:'-'+width_window+'px'}, 600);
return false;
});
thanks, Lau I'm not sure what this is called to google it, ok so i have 3 divs Code: <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> Now say my page is 800x600 So when the page loads #div1 and #div3 height = 390px and #div2 height = 20px; What i want is when #div2 is draged it resized #div1 and #div3 E.G (#div2 is draged up so top = -100px) so when that happens i want #div1 = 290px and #div3 = 490px And vice versa now this is the code i have for my site So #div1 = ".torrents-list" #div2 = "#dragBar" #div3 = "#torrent_info" PHP Code: $("#dragBar").draggable({ axis: 'y', drag: function(event, ui){ var heightString= $("#dragBar").css("top"); var height = parseInt(heightString.replace("px", "")); $("#dragBar").css("top", "0px"); $(".torrent-list").height($(".torrent-list").height() + heightString); $("#torrent_info").height($("#torrent_info").height() - heightString); } }); But this dose not work for me its never setting #dragBar top to 0px and not resizing any thing if some one can tell me what this is called so i can google for a prebuilt one if not help me write one please? Hi there, I am looking to retrieve the hieght of the browser window, so that when my index page loads, it will automatically resize an iframe that i have to fill the remaining hieght of the window. The image above shows the location of the iframe, and the problem that i am facing. Currently, the height of the iframe is hardcoded. On my laptop screen the iframe looks as if it fills the remaining 100% of the height. However, when viewing this page on my 17in monitor, there is now an ugly white space. I would like to be able to dynamically change the height of the iframe, so that it can fill up that white space with more iframe height. (1) shows the current hard-coded height of the iframe, and (2) shows the height that i would like to be able to retrieve using javascript. If i can get this value, then i assume all i then need to do is to substract the number of pixels that are taken up by the image, and the two nav bars at the top. Hopefully this would then give me the iframe filling up all available white space. The code i have currently to set the iframe height is: Code: <script type="text/javascript">
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
iframeEl.style.height = 100 + "%";
alert(document.height);
}
}
</script>
</head>
<body onload="setIframeHeight('ifrm');">
So, I am now able to change the height of the iframe when the page loads, i just now need to hopefully be able to get the value from (2) in the image, to make it all work out nicely. Is this possible? Any help or advice will be greatly appreciated! Thanks in advance I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.
Hello, I have this short script he Code: function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array
for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image
var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].width(); //Gets image width
var parentHeight = parentElement.height(); //Gets height of parent element
var imgHeight = img[i].height();//Gets image height
if (parentWidth < imgWidth){
img[i].width(parentWidth); //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}
if (parentHeight > imgHeight){
img[i].height(parentHeight); //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}
alert(parentWidth); //To test if parentNode is working correctly. Should return an integer.
}
}
It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage. Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed. The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder. Thank you, Jared Hi, I have a form that I am submitting using JQuery, if I copy and paste the form into my main page, everything works fine. If I try to call the form in a separate page to onload none of the buttons work. Is there away around this? Not sure if providing my script helps or not, but just in case here it: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Messages</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitNewSend, #submitNewSend2, #submitNewSave, #submitNewSave2').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitNewSend'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if(btn == 'submitNewSend2'){
file = 'insertMessage.php';
Msg = 'Your message has been sent';
} else if (btn == 'submitNewSave'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
} else if (btn == 'submitNewSave2'){
file = 'insertSaveMessage.php';
Msg = 'Your message has been saved';
}
var data = $('#MessageNew').serialize();
$.post (file,data, function(){
alert(Msg);
$('#MessageNew').each (function(){
this.reset();
});
});
return false;
});
});
</script>
<script type="text/javascript">
function loadXMLDoc(File,ID){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
<head>
<body onload="loadXMLDoc('getloadCompose.php','txtHintCompose')">
<br />
<br />
<div id="txtHintCompose"></div>
</form>
</body>
</html>
And the getloadCompose.php is: Code:
<form action="" method="post" name="MessageNew" id="MessageNew" autocomplete="OFF">
<table id="new" width="60%">
<tr>
<th>Compose Message</th>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend2" id="submitNewSend2" value="Send">
<input type="button" class="button3" name="submitNewSave2" id="submitNewSave2" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
<tr>
<td>
<br />
<label class="two"><b>To:</b></label><input type="text" class="input" name="to" id="to" value=""><input type="text" class="input" name="recipient" id="recipient" value="" onkeyup="showHint(this.value, 'getEmailName.php','txtHintEmailTo')" size="70" /><br /><br />
<div id="txtHintEmailTo"></div>
</td>
</tr>
<tr>
<td>
<label class="two"><b>Subject:</b></label><input type="text" class="input" name="subject" id="subject" value="enter subject" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter subject':this.value;" size="70" /><br /><br />
</td>
</tr>
<tr>
<td>
<label class="two"><b>Message: </b></label><div class="scroll"><textarea rows="10" cols="75" class="input" name="messsage" id="message">Enter Message</textarea></div><br /><br /><br />
</td>
</tr>
<tr>
<td class="first">
<input type="button" class="button3" name="submitNewSend" id="submitNewSend" value="Send">
<input type="button" class="button3" name="submitNewSave" id="submitNewSave" value="Save">
<input type="button" class="button3" name="submitNewCancel" value="Cancel" onclick="loadXMLDocRefresh('getloadInbox.php','txtHintMessage')" />
</td>
</tr>
</table>
</form>
I know I have buttons doing the same function,there is an ease of use reason for it. I can put everything on my main page if necessary, but it wouldn't really be doing exactly what I want it to do. I am trying to get a site working that some hack developed. Got it nearly operational, except for one page, the down arrows do not work. They fire via javascript. It is just a hover and scroll deal. The java gets loaded the same for every page, but it breaks on this one. I am decent with some coding, but I know I am light years behind the smart people in this forum, especially when it comes to java. I really could use a hand. Thanks Working scroll: http://66.147.244.241/~finalco1/inde...mation-fm.html The broken scroller: http://66.147.244.241/~finalco1/inde...act-us-fm.html here is my code Code: <ul id="myList" class="myList">
<form method="post" action="somepage">
<li id="item_1">
<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
Link Group
</li>
<li id="item_2">
<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
Page Group
</li>
<li id="item_3">
<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
SEO
</li>
<li id="item_4">
<a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
function toggleEditor(id) {
if (!tinyMCE.get(id))
tinyMCE.execCommand('mceAddControl', false, id);
else
tinyMCE.execCommand('mceRemoveControl', false, id);
}
</script>
<textarea name="content" style="width:96%">
</textarea>
<a href="javascript:toggleEditor('content');">Add/Remove editor</a>
</li>
</form>
</ul>
<p id="myList_serialize"></p>
<script type="text/javascript" language="javascript" charset="utf-8">
Sortable.create('myList',{ghosting:false,constraint:true,hoverclass:'over',
onChange:function(element){
var totElement = 7;
var newOrder = Sortable.serialize(element.parentNode);
for(i=1; i<=totElement; i++){
newOrder = newOrder.replace("myList[]=","");
newOrder = newOrder.replace("&",",");
}
$('myList_serialize').innerHTML = '<strong>New Order</strong>: '+newOrder;
}
});
</script>
I some draggable li's which works fine, I have a tinyMCE WYSIWYG editor which works fine! How can I add a form to my UL LI? i am dynamically making pdf files, works great using abcpdf etc etc. the only problem that i am having is with the page breaking. i want to create a function that runs onload and can read the position of elements and add breaks before the element if it is cut off. each block ("from the west", "holiday inn express") is a span with the class name of "entry" i want to loop through those, get their height, add them together and if that span falls in the range of the page size (792px) add a page break before it. the difficult part will be when we get to pages 2 and above does that make sense? im throwing around some ideas now in a js file, if you have any please post them thanks I'm wondering if anyone out there has a jquery solution to using an iframe that automatically adjusts it's height of the child and also works cross domain. Any help would be greatly appreciated. Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. 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 I am trying to give uses the ability to email a web page in addition to print the pages but I cannot get the web page to post as the body of the email. Here is what the print function looks like: Code: function OnPrint() {
var contentWindow = GetContentFrame().contentWindow;
{
contentWindow.focus();
contentWindow.print();
}
}
and here is where I stand on the email the page(not just a link to the page) Code: function mailpage()
{
mail_str = "mailto:optilinksupport@seton.org?subject=Check out the " + document.title;
mail_str += "&body=I thought you might be interested in the " + document.title;
mail_str += ". You can view it at, " + location.href;
location.href = mail_str;
}
The above work great if I want to send a link to the page. How do I amend the above so that the the mail_str = contentWindow html? And do I need to do make other changes to format the email as html rather than text? Thank for a rookie! i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly Code: <script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>
epic thread title! Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case. PHP Code: // save notes against company if ($_POST['a']=="Save Note") { if (addnote($_POST['notetitle'],$_POST['notebody'])) { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>"; } else { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>"; } } I want to then wait until the page load is complete and then do the following. PHP Code: document.getElementById('addevent').style.display='block'; The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown. Now my current fail attempt at doing it was this PHP Code: echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this. Hi' there Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized? Hi everyone, I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this. I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:5, // Slide transition speed
pauseTime:7000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:false, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.png', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Does anyone have any ideas? I appreciate the help in advance! Tsiqueira Hi, I wish to get some content from another page. Here is my code. Code: <script type="text/javascript">
jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) {
var x = jQuery('#box4 .first:last', ajax).innerHTML;
document.write(x);
}
}
});
</script>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>
But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png Thanks Hello all, I would like someone to help me with this. I'm building my portfolio website. I'm an illustrator and graphic designer (for printing). My website uses html and css. I introduce a jquery plugin to create a slide show with my work. Until then, everything was working well. The problem appears when I introduce php to my code in order not to repeat the navigation bar all the time. With php and the jquery together I get a blank page in my browser. This link shows the blank page I'm getting using php and jquery together. http://www.raulmv.com/calendar.php This is an example of the site without the jquery. http://www.raulmv.com/graphics.php Could someone please help me with this thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<title>#</title>
<meta name="google-site-verification" content="1ksaaEb5-Ur8h5ivruWp4iRcUB-tDLyM43L6yCl1OuQ" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<!--Google Analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12002561-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="#" id="portfolio">
<div id="container">
<!--Top Navigation-->
<div id="navcontainer"> <?php {include("navbartop.html");} ?> </div>
<!--Left Navigation-->
<div id="navBar"> <?php include("navbarleft.html"); ?> </div>
<!--Info-->
<div id="info">
<span class="Title">ANYTIME CALENDAR | 2009</span>
<span class="style">Calendar designed to be used any year, any occasion, anytime.</span>
</div>
<!--Imagenes-->
<div id="showreel-nav-wrap">
<span>
</span>
</div>
<ul id="buy-links" class="slideshow">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div id="showreel">
<ul class="slideshow pics">
<?xml version="1.0" encoding="utf-8"?>
<li><img src="images/Calendar.png" height="522px"/>
</li>
<li><img src="images/IMG_1162.png" height="522px" />
</li>
<li><img src="images/IMG_1307.png" />
</li>
<li><a href="images/Calendar/Instructions.gif"><img src="images/Instructions_small.gif" /></a>
</li>
</ul>
</div><!--/showreel-->
<script type="text/javascript">
$(function() {
var totalImg = $("#showreel li").size() - 1;
$("#buy-links li:gt(" + totalImg + ")").remove();
$("#showreel-nav-wrap span").after('<div id="showreel-nav" class="showreel-nav">')
$('.slideshow').each(function(index) {
$(this).cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
sync: false,
pager: '#showreel-nav',
pagerAnchorBuilder: function(i) {
if (index == 0)
// for first slideshow, return a new anchor
return '<a href="#">'+(i+1)+'</a>';
// for 2nd slideshow, select the anchor created previously
return '#showreel-nav a:eq('+i+')';
}
});
});
//Image to trigger showreel links
activeLink = $('#showreel-nav').find('.activeSlide');
nextLink = activeLink.next();
$('.slideshow img').bind('click',function(){
activeLink = $('#showreel-nav').find('.activeSlide');
nextLink = activeLink.next();
nextLink.trigger('click');
});
//Get h1 text length
var h1length = $('h1').text().length;
if(h1length > 27) {
$('.oj-title').css('margin-top','-21px');
}
});
</script>
<!-- end #mainContent --></div>
</body>
</html>
Those <li> tags Im using is to numbered the images. It might not be a good practice but it works. Thanks for reading this post, I hope someone could help me. It's frustrating I have been for the last two days going around trying to change things and nothing seems to work. |
|||||||