|
JavaScript - Pikachoose Jquery Issue In Ie 8? Help Please.
Similar TutorialsAnyone familiar enough with pikachoose to help me out here? Using a pikachoose slideshow inside an iframe and for some reason adding a url target of _top or _parent is not working. It just opens up the link in the iframe window no matter what i do. Anyone with an idea of how to fix this? I'm working on it in the staging area of my site- http://staging.susanb.com/ You can see when you click on one of the images it doesnt fill the entire window This just creeped up on me at the end of a project so im hoping its not a deal breaker thanks in advance!! Hello, I have a working Pikachoose. Seems so easy to to set this up, but I have one problem. The 'next' and 'previous' text I'd like to remove. Just wondering how I go about doing this? Thanks I'm totally stumped. Check this out: http://174.37.72.84/portfolios/engagements/ It works in FF and Safari, but not IE. Everything validates, and I'm getting no JS errors. Anybody have any ideas? Thanks http://www.panic.com/coda/ If you put ur mouse over Download a fancy jquery pops up! I wud want the same popup but flip the image around so its below the mouse pointer not above, the CSS is confusing me can some1 tell me how do i fix that issue? Thanx I can't get my divs to use Jquery's resizable specifically #action1 web site is http://opentech.durhamcollege.ca/~in...rittains/labs/ code is Code: /*document.writeln('<object id="cursorObj" width="0" height="0" >');
document.writeln('<param name="movie" value="flash/cursor.swf" name="wmode" value="transparent">');
document.writeln('<embed id="cursorEmbed" src="flash/cursor.swf" width="0" height="0" style="position: absolute;" wmode="transparent">');
document.writeln('</embed>');
document.writeln('</object>');*/
var browser=navigator.appName;
var frameWidth = "";
var frameHeight = "";
var d = new Date();
var year = d.getFullYear();
var date = "";
var menuCheck = false;
var si = "";
var io = "";
var windowT = "";
var cursorObj = "";
var cursorEmbed = "";
var windowState = false;
var windowBody = "";
var bgImage_JS = document.getElementById("bgImage");
var desktop_JS = document.getElementById("desktop");
var menuBar_JS = document.getElementById("menuBar");
var menuBarButton_JS = document.getElementById("menuBarButton");
var menuBarContainer_JS = document.getElementById("menuBarContainer");
var menuBarClock_JS = document.getElementById("menuBarClock");
var action1_JS = document.getElementById("action1");
var action2_JS = document.getElementById("action2");
var action3_JS = document.getElementById("action3");
var showdesktopButton_JS = document.getElementById("menuBarButtonShowdesktopInput");
var windowExitImage_JS = document.getElementById("windowExitImage");
/*if(browser!="Netscape") {
windowExitImage_JS.style.top = "-25px";
}*/
function requestWindow(url) {
if(windowState==false) {
windowOpen();
requestWindowInput()
}
else if(windowState==true) {
windowClose();
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
function requestWindowInput() {
document.getElementById('action1').innerHTML=xmlhttp.responseText;
}
function requestdesktop(url) {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('desktop').innerHTML=xmlhttp.responseText;
}
requestdesktop('desktop.php');
function reset() {
if (self.innerWidth) {
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body) {
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}
/*cursorObj = document.getElementById("cursorObj");
cursorEmbed = document.getElementById("cursorEmbed");*/
if(browser!="Netscape") {
bgImage_JS.style.top = 8 + "px";
bgImage_JS.style.left = 8 + "px";
desktop_JS.style.top = 8 + "px";
desktop_JS.style.left = 8 + "px";
menuBar_JS.style.top = (frameHeight - 45) + "px";
menuBar_JS.style.left = 8 + "px";
desktop_JS.style.width = "24px";
}
bgImage_JS.style.width = (frameWidth - 21) + "px";
bgImage_JS.style.height = (frameHeight - 51) + "px";
desktop_JS.style.width = (frameWidth - 20) + "px";
desktop_JS.style.height = (frameHeight - 50) + "px";
menuBar_JS.style.width = (frameWidth - 20) + "px";
menuBar_JS.style.top = (frameHeight - 40) + "px";
menuBarClock_JS.style.left = (frameWidth - 100) + "px";
/*cursorEmbed.style.width = (frameWidth - 20) + "px";
cursorEmbed.style.height = (frameHeight - 20) + "px";
cursorEmbed.style.width = (frameWidth - 20) + "px";
cursorEmbed.style.height = (frameHeight - 20) + "px";*/
t=setTimeout('reset()',500);
}
function menuSize() {
action3_JS.style.backgroundColor = "black";
action3_JS.style.color = "#C0C0FF";
action3_JS.style.border = "1px solid #C0C0FF";
action3_JS.style.width = "250px";
action3_JS.style.height = "400px";
action3_JS.style.padding = "5px";
if(browser!="Netscape") {
action3_JS.style.top = (frameHeight - 452) + "px";
var winCheck = frameWidth - 1651;
if(winCheck<=0) {
action3_JS.style.left = 8 + "px";
}
else {
action3_JS.style.left = (frameWidth - 1672) + "px";
}
}
else {
action3_JS.style.top = (frameHeight - 452) + "px";
var winCheck = frameWidth - 1672;
if(winCheck<=0) {
action3_JS.style.left = 8 + "px";
}
else {
action3_JS.style.left = (frameWidth - 1672) + "px";
}
}
//menuT=setTimeout('menuSize()',500);
}
function menu() {
if(menuCheck==false) {
var lab1 = "'lab1.php'";
var lab2 = "'lab2.php'";
var lab3 = "'lab3.php'";
var lab4 = "'lab4.php'";
var lab5 = "'lab5.php'";
var lab6 = "'lab6.php'";
menuSize();
action3_JS.innerHTML = '<input type="button" class="menuButtons" id="menuButton1" value="Lab1" onclick="requestWindow(' + lab1 + ')" /><input type="button" class="menuButtons" id="menuButton2" value="Lab2" onclick="requestWindow(' + lab2 + ')" /><input type="button" class="menuButtons" id="menuButton3" value="Lab3" onclick="requestWindow(' + lab3 + ')" /><input type="button" class="menuButtons" id="menuButton4" value="Lab4" onclick="requestWindow(' + lab4 + ')" /><input type="button" class="menuButtons" id="menuButton5" value="Lab5" onclick="requestWindow(' + lab5 + ')" /><input type="button" class="menuButtons" id="menuButton6" value="Lab6" onclick="requestWindow(' + lab6 + ')" /><input type="button" class="menuButtons" id="menuButtonShowdesktop" value="Show desktop" onclick="showDesktop()" />';
menuCheck=true;
}
else if(menuCheck==true) {
action3_JS.style.backgroundColor = "transparent";
action3_JS.style.border = "0px solid #C0C0FF";
action3_JS.style.width = "0px";
action3_JS.style.height = "0px";
action3_JS.style.padding = "0px";
action3_JS.style.top = "0px";
action3_JS.style.left = "0px";
action3_JS.innerHTML = "";
//window.clearTimeout(menuT);
menuCheck=false;
}
}
function clearMenu() {
action3_JS.style.backgroundColor = "transparent";
action3_JS.style.border = "0px solid #C0C0FF";
action3_JS.style.width = "0px";
action3_JS.style.height = "0px";
action3_JS.style.padding = "0px";
action3_JS.style.top = "0px";
action3_JS.style.left = "0px";
action3_JS.innerHTML = "";
menuCheck=false;
//menuT=setTimeout('clearMenu()',500);
}
function showDesktop() {
clearMenu();
action1_JS.style.display = "none";
action1_JS.style.backgroundColor = "transparent";
action1_JS.style.border = "0px solid #C0C0FF";
action1_JS.style.width = 0 + "px";
action1_JS.style.height = 0 + "px";
action1_JS.style.left = 0 + "px";
action1_JS.style.top = 0 + "px";
window.clearInterval(si);
window.clearTimeout(windowT);
windowState = false;
}
function windowSize() {
action1_JS.style.backgroundColor = "black";
action1_JS.style.color = "#C0C0FF";
action1_JS.style.border = "1px solid #C0C0FF";
action1_JS.style.width = (frameWidth - 375) + "px";
action1_JS.style.height = (frameHeight - 200) + "px";
action1_JS.style.left = (frameWidth - 1500) + "px";
var winCheck1 = (frameWidth - 1500);
if(winCheck1<=0) {
action1_JS.style.left = (frameWidth - 850) + "px";
}
winCheck1 = (frameWidth - 850);
if(winCheck1<=0) {
action1_JS.style.left = (frameWidth - 300) + "px";
action1_JS.style.width = (frameWidth - 50) + "px";
}
action1_JS.style.top = (frameHeight - 750) + "px";
var winCheck2 = (frameHeight - 750);
if(winCheck2<=0) {
action1_JS.style.top = (frameHeight - 500) + "px";
}
//windowT=setTimeout('windowSize()',500);
$(function() {
$("#action1").resizable();
});
}
function windowOpen() {
windowSize();
action1_JS.style.display = "none";
$("#action1").fadeIn(1300);
setTimeout("requestWindowInput()", 100);
windowState = true;
clearMenu();
}
function windowClose() {
action1_JS.style.display = "";
$("#action1").fadeOut(1300);
windowState = false;
clearMenu();
setTimeout("windowOpen()", 1350);
}
function windowDragStart() {
$(function() {$("#action1").draggable( {disabled: false} );});
}
function windowDragEnd() {
$(function() {$("#action1").draggable( {disabled: true} );});
}
function windowExitMouseover() {
document.getElementById("windowExitImage").src = "images/exit2.png";
}
function windowExitMouseout() {
document.getElementById("windowExitImage").src = "images/exit1.png";
}
$(function() {
$("#action1").resizable();
});
I'm trying to use the Code: $(function() {
$("#action1").resizable();
});
to access the resizable but its not working =[ I did something like this: Quote: $('#test').append("<option id='ddm'>added dropdown</option>"); it shows its html in the browser but I can't see it when I view source, is this normal? Thanks. Can someone please tell me how I can make the datepicker pick a date that is after a certain date I choose. <script type="text/javascript"> $(document).ready(function() { $( "#date" ).datepicker({ minDate: new Date(<?php echo $split_date[2];?>, <?php echo $split_date[0] - 1;?>, <?php echo $split_date[0];?>)}); }); </script> <?php /* I am trying to get the date from a dynamic php variable. For eg: */ $date='03/08/2011'; $split_date=explode("/",$date); echo $split_date[0]; echo $split_date[1]; echo $split_date[2]; ?> but nothing i tried so far works! Hey guys I am having little trouble with this jQuery. The code seems to be working in all browsers and suffers only minor issues in IE. For some reason, the last 4 items do not expand/contract on IE (ONLY). Any help will be gladly appreciated. Here's my code: Code: <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.modbargains.com/images/Javascript/Collapse/animatedcollapse.js">
</script>
<script type="text/javascript">
animatedcollapse.addDiv('bodykits', 'fade=1,height=70px')
animatedcollapse.addDiv('brakes', 'fade=1,height=40px')
animatedcollapse.addDiv('chipsandtuners', 'fade=1,height=20px')
animatedcollapse.addDiv('engineparts', 'fade=1,height=260px')
animatedcollapse.addDiv('exhaust', 'fade=1,height=270x')
animatedcollapse.addDiv('exterior', 'fade=1,height=160px')
animatedcollapse.addDiv('interior', 'fade=1,height=105px')
animatedcollapse.addDiv('suspension', 'fade=1,height=155px')
animatedcollapse.addDiv('wheels', 'fade=1,height=280px')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<style type="text/css">
.collapselist li {
padding:2px 0px 2px 8px;
background:url(http://www.modbargains.com/Theme/02/c_arrow.gif) no-repeat 0px 0px;}
</style>
</head>
<body>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('bodykits')">Body Kits</a>
<div class="collapselist" id="bodykits" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/iCarbon-Carbon-Fiber-Body-Parts.htm">iCarbon Products</a></li>
<li><a href="http://www.modbargains.com/ARKYM-Carbon-Fiber-Areo-Kits.htm">ARKYM CF Aero Kits</a></li>
<li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('brakes')">Brakes</a>
<div class="collapselist" id="brakes" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/Brembo-brakes.htm">Brembo Brakes</a></li>
<li><a href="http://www.modbargains.com/Stoptech.htm">StopTech Brakes</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('chipsandtuners')">Chips and Tuners</a>
<div class="collapselist" id="chipsandtuners" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/Cobb-AccessPORT-ECU-Flash-BMW-N54-135i-335i-535i-AP-BMW-001.htm">Cobb AccessPORT</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('engineparts')">Engine Parts</a>
<div class="collapselist" id="engineparts" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/afe-power-parts.htm">aFe Power Intakes</a></li>
<li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
<li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
<li><a href="http://www.modbargains.com/Rogue-Engineering.htm">Rogue Engineering Parts</a></li>
<li><a href="http://www.modbargains.com/Rogue-Engineering.htm">Rogue Engineering Parts</a></li>
<li><a href="http://www.modbargains.com/Evolution-Racewerks.htm">Evolution Racewerks</a></li>
<li><a href="http://www.modbargains.com/Cusco-Suspensions-Strut-Bars-Braces.htm">Cusco Strut Bars/Braces</a></li>
<li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
<li><a href="http://www.modbargains.com/Active-Autowerke.htm">Active Autowerke</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('exhaust')">Exhaust</a>
<div class="collapselist" id="exhaust" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/Remus-Exhaust.htm">Remus SportExhaust</a></li>
<li><a href="http://www.modbargains.com/Supersprint-Performance-Exhaust-Systems.htm">Supersprint</a></li>
<li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
<li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
<li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
<li><a href="http://www.modbargains.com/Eisenmann-Exhaust.htm">Eisenmann-Exhaust</a></li>
<li><a href="http://www.modbargains.com/Borla-Exhausts.htm">Borla Exhaust</a></li>
<li><a href="http://www.modbargains.com/Active-Autowerke.htm">Active Autowerke</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('exterior')">Exterior</a>
<div class="collapselist" id="exterior" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
<li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
<li><a href="http://www.modbargains.com/iCarbon-Carbon-Fiber-Body-Parts.htm">iCarbon Products</a></li>
<li><a href="http://www.modbargains.com/ARKYM-Carbon-Fiber-Areo-Kits.htm">ARKYM CF Aero Kits</a></li>
<li><a href="http://www.modbargains.com/Evolution-Racewerks.htm">Evolution Racewerks</a></li>
<li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('interior')">Interior</a>
<div class="collapselist" id="interior" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
<li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
<li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
<li><a href="http://www.modbargains.com/Active-Autowerke.htm">Active Autowerke</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('suspension')">Suspension</a>
<div class="collapselist" id="suspension" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/KW-Suspension.htm">KW Suspension</a></li>
<li><a href="http://www.modbargains.com/PowerFlex-Urethane-Suspension-Bushings.htm">PowerFlex Suspension Bushings</a></li>
<li><a href="http://www.modbargains.com/HR-Suspensions.htm">H&R Suspensions</a></li>
<li><a href="http://www.modbargains.com/Cusco-Suspensions-Strut-Bars-Braces.htm">Cusco Suspensions</a></li>
<li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
</ul>
</div>
<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('wheels')">Wheels</a>
<div class="collapselist" id="wheels" style="width: 160px; display:none;">
<ul style="list-style:none; padding:2; margin:0;">
<li><a href="http://www.modbargains.com/Alufelgen-Wheels-BMW.htm">Alufelgen </a></li>
<li><a href="http://www.modbargains.com/Avant-Garde-Wheels.htm">Avant Garde </a></li>
<li><a href="http://www.modbargains.com/Axis-Wheels.htm">Axis </a></li>
<li><a href="http://www.modbargains.com/BMW-Replica-Wheels.htm">BMW Replica </a></li>
<li><a href="http://www.modbargains.com/EXE-Wheels.htm">EXE </a></li>
<li><a href="http://www.modbargains.com/Forgestar-Wheels.htm">Forgestar </a></li>
<li><a href="http://www.modbargains.com/iForged-Wheels.htm">iForged </a></li>
<li><a href="http://www.modbargains.com/Miro-Wheels.htm">Miro </a></li>
<li><a href="http://www.modbargains.com/TSW-Wheel.htm">TSW </a></li>
<li><a href="http://www.modbargains.com/Ultra-Wheels.htm">Ultra </a></li>
<li><a href="http://www.modbargains.com/VMR-Wheels.htm">VMR </a></li>
<li><a href="http://www.modbargains.com/VW-Audi-Replica-Wheels.htm">Audi/VW Replica </a></li>
<li><a href="http://www.modbargains.com/_e/dept/66/Linea_Corse_Wheels.htm">Linea Corse </a></li>
<li><a href="http://www.modbargains.com/_e/dept/105/Mercedes_Replica_Wheels.htm">Mercedes Replica </a></li>
</ul>
</div>
</body>
Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html>
<head>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="left"><div class="right"></div></div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
//]]>
</script>
<style type="text/css">
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li
{
background-color:Gray;
float:left;
width:120px;
height:40px;
line-height:40px;
border:solid 1px black;
position:relative;
}
#navMenu li a {
z-index:20;
display:block;
height:40px;
position:relative;
color:Black;
}
#navMenu li .left {
background-color:Green;
position:absolute;
width:20px;
height:40px;
top:0px;
z-index:0;
display:none;
}
#navMenu li .right {
background-color:Red;
position:absolute;
width:100px;
height:70px;
top:0px;
z-index:0;
display:none;
}
#navMenu li.selected {
background-color:Blue;
}
</style>
</head>
<body>
<ul id="navMenu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</body>
</html>
I would appreciate any help given! Thanks Hi guys, I'm relatively new to coding, so apologies if this is something really trivial or even uneccessarily long. I'm currently running a mootools and a jquery script on the same page (http://tamwardsings.squarespace.com/media). Jquery = Jplayer audio player mootools = video light box Initially the jquery script wasn't working but I resolved that with var $j = jQuery.noConflict(); Now, while both scripts run in Chrome and Safari Browsers, firefox will not initiate either script. Clicking an image with a link to the video lightbox instead sends you directly to the anchored link, and the audio player, fails to play. Videobox script: Code: var Videobox = {
init: function (options) {
// init default options
this.options = Object.extend({
resizeDuration: 400, // Duration of height and width resizing (ms)
initialWidth: 250, // Initial width of the box (px)
initialHeight: 250, // Initial height of the box (px)
defaultWidth: 425, // Default width of the box (px)
defaultHeight: 350, // Default height of the box (px)
animateCaption: true, // Enable/Disable caption animation
flvplayer: 'storage/js/flvplayer.swf'
}, options || {});
this.anchors = [];
$A($$('a')).each(function(el){
if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
el.addEvent('click', function (e) {
e = new Event(e);
e.stop();
this.click(el);
}.bind(this));
this.anchors.push(el);
}
}, this);
this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
bottom: this.bottom.effect('margin-top', {duration: 400})
};
},
click: function(link) {
return this.open (link.href, link.title, link.rel);
},
open: function(sLinkHref, sLinkTitle, sLinkRel) {
this.href = sLinkHref;
this.title = sLinkTitle;
this.rel = sLinkRel;
this.position();
this.setup();
this.video(this.href);
this.top = Window.getScrollTop() + (Window.getHeight() / 15);
this.center.setStyles({top: this.top+'px', display: ''});
this.fx.overlay.start(0.8);
this.step = 1;
this.center.setStyle('background','#fff url("/storage/loading.gif) no-repeat center');
this.caption.innerHTML = this.title;
this.fx.center.start({'height': [this.options.contentsHeight]});
},
setup: function(){
var aDim = this.rel.match(/[0-9]+/g);
this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;
},
position: function(){
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
},
video: function(sLinkHref){
if (sLinkHref.match(/youtube\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('/');
this.videoID = videoId[4];
this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/google\.com\/videoplay/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('=');
this.videoID = videoId[1];
this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/ifilm\.com\/video/i)) {
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split('video/');
this.videoID = videoId[1];
this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
this.so.addVariable("flvbaseclip", this.videoID+"&");
this.so.addParam("wmode", "transparent");
}
else if (sLinkHref.match(/\.mov/i)) {
this.flash = false;
if (navigator.plugins && navigator.plugins.length) {
this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
} else {
this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
}
}
else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
this.flash = false;
this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
}
else if (sLinkHref.match(/\.flv/i)) {
this.flash = true;
this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
}
else {
this.flash = true;
this.videoID = sLinkHref;
this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
}
},
nextEffect: function(){
switch (this.step++){
case 1:
this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
break;
this.step++;
case 2:
this.center.setStyle('background','#fff');
this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = '';
this.fx.bottom.start(0);
break;
}
this.bottomContainer.style.height = '';
this.step++;
}
},
close: function(){
this.fx.overlay.start(0);
this.center.style.display = this.bottomContainer.style.display = 'none';
this.center.innerHTML = '';
return false;
}
};
window.addEvent('domready', Videobox.init.bind(Videobox));
HTML for videobox: Code: <script src="/storage/js/mootools.js"></script> <script src="/storage/js/swfobject.js"></script> <script src="/storage/js/videobox.js"></script> <link href="/storage/js/videobox.css" media="screen" rel="stylesheet" type="text/css" /> <div id="vid1"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid1.jpg" alt="" /></a></div> <div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid2.jpg" alt="" /></a></div> <div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid3.jpg" alt="" /></a></div> Jplayer javascript: Code: //<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){
var Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
$j.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$j(this.cssSelector.jPlayer).jPlayer(this.options);
$j(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
$j(this).blur();
return false;
});
$j(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
$j(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
$j(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
$j.each(this.playlist[i], function(property,value) {
if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
$j(this.cssSelector.playlist + " ul").append(listItem);
$j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = $j(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
$j(self.cssSelector.jPlayer).jPlayer("play");
}
$j(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
$j.each(this.playlist[i], function(property,value) {
if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
$j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $j(this).data("index");
$j(self.cssSelector.playlist + "_item_" + index).click();
$j(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
$j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
$j(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
}
};
var audioPlaylist = new Playlist("1", [
{
name:"Tempered Song",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
},
{
name:"Hidden",
mp3:"http://tamtam123.squarespace.com/storage/images/avenged_unholyc.mp3"
}
], {
ready: function() {
audioPlaylist.displayPlaylist();
audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
audioPlaylist.playlistNext();
},
play: function() {
$j(this).jPlayer("pauseOthers");
},
swfPath: "storage/js",
supplied: "mp3"
});
$j("#jplayer_inspector_1").jPlayerInspector({jPlayer:$j("#jquery_jplayer_1")});
$j("#jplayer_inspector_2").jPlayerInspector({jPlayer:$j("#jquery_jplayer_2")});
});
//]]>
Any help on this matter would be greatly appreciated, Josh Hello! I've been fighting with a jQuery slider all day, and it's going nowhere because admittedly I have extremely limited jQuery knowledge. I am really hoping that someone here is better at this than I am and can tell me why I see a list of the items that should be in the slider stacked up on top of each other rather than seeing the actual slider. Here is the functions.php code. All CSS is in place, but I can copy/paste the stylesheet if necessary as well. If this isn't an appropriate forum for this, can you point me in the right direction? I don't even know which way is up anymore!!! Code:
<?php
/* HEADER SCRIPTS */
function headscript() {
global $post;
if (function_exists('is_products_page')){
if ( get_post_type() == 'wpsc-product' || is_products_page() )
return;
}
?>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3270175-9']);
_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>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<script type="text/javascript" src="http://www.claritymind.com/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider2").easySlider({
auto: true,
continuous: true,
pause: 6000,
speed: 800,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
<script type="text/javascript">
$(function () {
$('a#testbutton').hover(function() {
$(this).fadeTo("fast", 1);
}, function() {
$(this).fadeTo("fast", .85);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider1").easySlider({
numeric: true,
auto: true,
continuous: true,
pause: 9000,
speed: 700,
});
});
</script>
<?php }
/* PAGE SPECIFIC CSS TWEAKS */
function home_head() {
if (is_home() || is_front_page()) { ?>
<style type="text/css">
.custom .headline_area {display:none;}
</style>
<style type="text/css">
.custom .servnav {display:none;}
</style>
<?php } }
function nonhomepagecss(){
if (!is_home() && !is_front_page()) { ?>
<style type="text/css">
.custom #sidebars{margin-top:15px;background:none;}
body.custom {background-color:#f5f6f7;}
.custom #content_area {background-color: #F5F6F7;}
.custom .post_box{padding-top:30px;}
.custom #content_box{
margin: 30px auto;
width: 960px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: white;
box-shadow: 3px 3px 3px #CCC;
-moz-box-shadow: 3px 3px 3px #CCC;
-webkit-box-shadow: 3px 3px 3px #CCC;
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
font-family: 'Lucida Grande', 'Lucida Grande Unicode', Helvetica, Verdana, sans-serif;
padding-bottom: 30px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
</style>
<?php } }
function new_servicespage() {
if (is_page('services') || is_page('30')) { ?>
<style type="text/css">
.custom .topnav {display:none;}
.custom .servnav {display:block;}
</style>
<div id="content">
<div class="post_box">
<div class="headline_area">
</div>
Example text will go here.
</div>
</div>
<div id="sidebars"><span class="newcallout1h4">
<table>
<tr>
<div style="vertical-align:top;">
<td width="275"><img src="http://cm.deviantwebdesign.com/wp-content/uploads/2012/03/VideoPlace.jpg" height="180" width="260">
</div>
<td width="330"><div style="margin-left: 30px;"> <font color="#000000" font size="4">HEADLINE TEXT</font>
<ul>
<font color="#000000" font size="3">
<li>Bullet 1 - Example text goes here.</li>
<li>Bullet 2. Ut enim ad minim veniam, quis nostrud exercitation.</li>
<li>Bullet 3. Duis aute irure dolor in reprehenderit in voluptate velit esse.</li>
</font>
</ul>
</div></td>
<td width="275"><div style="margin-left: 30px;">
<script type="text/javascript" src="//moon-ray.com/v2.4/include/formEditor/genjs.php?html=true&uid=p2c6497f5&version=1"></script>
</div></td>
</tr>
</table>
</span>
<?php thesis_build_sidebars(); ?>
</div>
<?php } }
add_action('thesis_hook_custom_template', 'new_servicespage');
/* NAVIGATION MENU */
function navmenuarea(){ ?>
<div class="topnav">
<div style="width:960px;margin-left:auto;margin-right:auto;">
<div style="float:left;">
<a href="http://claritymind.com/"><img alt="clrity-logo" src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" style="position:relative;left:0px;" /></a>
</div>
<div style="float:right;padding-top:11px;">
<ul id="navlist">
<li><a href="http://claritymind.com/services">Services</a></li>
<li><a href="http://claritymind.com/next-step">Next Steps</a></li>
<li><a href="http://claritymind.com/about">About</a></li>
<li><a href="http://claritymind.com/free-articles">Free Stuff</a></li>
<li><a href="http://claritymind.com/clients">Clients</a></li>
<li><a href="http://claritymind.com/events">Events</a></li>
<li><a style="color:#BCFC3D;" href="http://claritymind.com/products">Store</a></li>
</ul>
</div>
</div>
</div>
<?php }
/* FEATURED AREA */
function lowermenu(){
if (is_page()) { ?>
<div class="clear"></div>
<div style="width:100%;height:5px;"></div>
<div class="pagecentered">
<div class="newcallout1">
</div>
</div>
<div style="width:100%;height:15px;"></div>
<?php } }
/* REGISTER SIDEBARS FOR CUSTOM SIDEBARS */
if (function_exists('register_sidebar')) {
$sidebars = array(1,2, 3, 4, 5, 6, 7, 8, 9, 10);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Side ' . $number,
'id' => 'side-' . $number,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
}
}
function sidebartabs(){
if (function_exists('is_products_page')){
if ( get_post_type() == 'wpsc-product' || is_products_page() )
return;
}
?>
<div style="width:100%;height:25px;"></div>
<div class="tabcontainer">
<ul class="tabs">
<li><a href="#tab1">Popular</a></li>
<li><a href="#tab2">Latest</a></li>
<li><a href="#tab3">Topics</a></li>
<li><a href="#tab4">Links</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content" style="padding-right:0px;">
<a href="http://www.claritymind.com/next-step/" style="border:0;padding:0;margin:0;"><img
src="http://www.claritymind.com/wp-content/uploads/2012/01/Master-Your-Mindset.png" alt="Change
Your Mindset with Clarity Mind Coaching" style="border:0;padding:0;margin:0;" /></a>
<div class="clear"></div>
</div>
<div id="tab2" class="tab_content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 6') ) :
?>
<?php endif; ?>
</div>
<div id="tab3" class="tab_content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 7') ) :
?>
<?php endif; ?>
<div class="clear"></div>
</div>
<div id="tab4" class="tab_content">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 8') ) :
?>
<?php endif; ?>
</div>
</div>
</div>
<div class="clear"></div>
<?php }
add_action('thesis_hook_before_sidebars', 'sidebartabs');
function home_pagecustom() {
if (is_home() || is_page(4217)) { ?>
<div style="height:0px;width:0px;position:relative;left:294px;z-index:999;">
<div style="width:356px;height:1px;background:#efefef;"></div>
<div style="width:356px;padding-top:2px;"><span class="nqheading">Featured from the
Blog</span></div>
</div>
<div id="slider1">
<ul>
<?php query_posts($query_string . '&cat=-3,-8&posts_per_page=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div class="post">
<div style="width:279px;margin-right:15px;float:left;">
<?php $post_image = thesis_post_image_info('image');
echo $post_image['output']; ?>
</div>
<div style="width:356px;float:right;padding-top:20px;">
<div style=height:300px;overflow:hidden;">
<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
<div style="width:356px;height:2px;"></div>
<span class="readstory"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue
Reading <?php the_title_attribute(); ?>">Continue Reading Post →</a>
</div>
<div class="clear"></div>
</div> <!-- closes the first div box -->
</li>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</ul>
</div><!-- close slider1 -->
<?php wp_reset_query(); ?>
<div style="width:650px;margin-top:10px;">
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Lifestyle Design</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=37&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Love & Relationships</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=39&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third last">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Personal Growth</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=226&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="clear"></div>
</div>
<div class="newcallout">
<h4 class="newcallouth4"><a href="http://www.claritymind.com/soul-affirmation-music-for-better-outcomes/">Browse Affirmation Music for Sale!</a></h4>
</div>
<div style="width:650px;margin-top:30px;">
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Awareness</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=15&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Meditation</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=40&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="one_third last">
<div style="width:100%;height:1px;background:#efefef;"></div>
<div style="width:100%;padding-top:2px;"><span class="nqheading">Spirituality</span></div>
<div style="width:199px;height:10px;"></div>
<?php query_posts($query_string . '&cat=61&posts_per_page=3'); ?>
<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 1) : ?>
<?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<span class="teaserexcerpt"><?php the_excerpt(); ?></span>
<?php else : ?>
<div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div>
<h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
<div class="clear"></div>
<br /><br /><br /><br />
</div>
<?php } }
add_action('thesis_hook_before_content', 'home_pagecustom');
/* CUSTOM FOOTER */
function newfooter(){ ?>
<div style="width:100%;height:80px;"></div>
<div style="width:100%;background:#000000;" class="footernew1">
<div style="width:100%;height:0px;position:relative;top:-132px;z-index:-1;">
<div style="background:url(http://www.claritymind.com/wp-content/uploads/2011/03/mountainback2.jpg) bottom repeat-x;height:132px;width:100%;"></div>
</div>
<div class="pagecentered" style="padding-top:15px;">
<div class="one_third">
<img src="http://www.claritymind.com/wp-content/uploads/2011/03/certification1.jpg" alt="certification" />
<div style="width:100%;height:3px;border-bottom:1px dotted #444;"></div>
<br />
<img src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" alt="Clarity Mind Logo" /><br />
20 Ravenscroft Drive Asheville, NC 28801<br />
404-NOW-MIND (404-669-6463)<br />
Skype: KenLad1
</div>
<div class="one_third">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 9') ) : ?>
<?php endif; ?>
</div>
<div class="one_third last">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 10') ) : ?>
<?php endif; ?>
</div>
<div class="clear"></div>
<div style="height:20px;width:100%;"></div>
<span style="font-size:10px;color:#fff;">Copyright © Clarity Mind, LLC. All Rights Reserved. Reproduction without permission prohibited.</span>
</div>
</div>
<?php }
function format_gridview_desc($description){
if (strlen($description) > 175)
$description = substr ( $description , 0 , 175 )."...";
echo $description;
}
/* create new side bar for music player - this will only be displayed on the product page */
register_sidebar(array(
'name'=> 'Music Player',
'id' => 'music_player',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
So I have a navigation thats decently simple, but the JS doesnt seem to operate in the correct manner. When i hover over a child navigation list item, the parent will start its animation as well. I know when you hover over the child you are in turn hovering over the parent, but is there a way to get the parent to not animate? http://jsfiddle.net/bWRWt/ This is an example we can all work on, which is exactly my situation. So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
I'm not sure if I'm in the right place or not, but I am in desparate need of some help. I have this code: Code: <script type="text/javascript">
$(document).ready(function(){
$('#add').click(function() {
alert('test');
});
$("form#exercise").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var activity = $('#activity').attr('value');
$.ajax({
type: "POST",
url: "newActiveProc.php",
data: "activity="+ activity +"&func=search",
success: function(activity){
$("span#results").html(activity);
}
});
return false;
});
});
</script>
As you can see by the highlighted portion, the user is alerted once they make a selection. It should go something like this: [Add to table] Football [Add to table] Basketball [Add to table] Baseball Once they click the 'add to table' button, their selection should be added to a table that is at the bottom of the page. So far, all I've been able to do is generate an alert box, but I know thats not right. Any information anyone has would be helpful. Thanks in advance. |
|||||||