|
JavaScript - Jquery Tooltip Issue
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 Similar TutorialsHello, I'm attempting to use a jQuery tooltip (Tipsy, located here) in the index of a forum. What I'd like to do is remove the forum's description and place it in a pop-up when you hover over the forum name. I've managed to get it to work, but only on the very first forum name. After that, they simply display the default browser tooltip. Here is the script code that goes in the header: Code: <script type='text/javascript'>
jQuery.noConflict();
jQuery(function() {
jQuery('#tooltip').tipsy({gravity: 's'});
});
</script>
Here is the part of the template that is affected: Code: <h4>
<a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" id='tooltip' title='{$forum_data['description']}'>{$forum_data['name']}</a>
</h4>
And the Tipsy library can be viewed he http://www.xasper.net/jquery.tipsy.js Does anyone know what could get this to work? I appreciate any assistance. Thank you. i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){
$("#d_clip_container").hover(
function () {
$(this).append($('<span class="tip">click to copy</span>'));
},
function () {
$(this).find("span:last").remove();
});
})
i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. 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 =[ 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! 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 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>
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. 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. Hi, i have some users picture in a page that is coming from database with php mysql_fetch_array function. what i want to do it, When mouse moves to any user's picture then then a small box should appear with that user's profile information with ajax and when mouse moves out it should disappear. and the box position should be with the mouse. please give me some sample code Anyone got any idea why this script won't work in IE (crap)? Working example (FF): http://martynleeball.x10hosting.com/tooltip.htm Code: function obj_position(obj,id) {
//Setup variables to hold position values
var left = top = 0;
if (obj.offsetParent) {
do {
//Get position values and put in variables
left += obj.offsetLeft;
top += obj.offsetTop;
} while (obj = obj.offsetParent);
}
//Get alt content for tooltip
var alt_message = document.getElementById(id).getAttribute('alt');
return left+","+top+","+alt_message;
}
function display_tooltip(obj) {
//Get the elementID first
var elmID = obj.id;
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var pos_mess = obj_position(obj,elmID);
//Now splitup the returned string to get the lef _position, right
//position and the message to be displayed
var part = pos_mess.split(",");
//Create variables for the parts
var left_pos = part[0];
var top_pos = part[1] - 18;
var message = part[2];
var container = document.getElementById('tooltip_container');
var newdiv = document.createElement('div');
newdiv.setAttribute('id','tooltip');
newdiv.className = 'tooltip_style';
newdiv.innerHTML = message;
//Position div
newdiv.style.position="absolute";
newdiv.style.top=top_pos+"px";
newdiv.style.left=left_pos+"px";
//Append newly created div to container
container.appendChild(newdiv);
}
function delete_tooltip() {
var container = document.getElementById('tooltip_container');
var old_div = document.getElementById('tooltip');
container.removeChild(old_div);
}
Hi, I am using a tooltip that uses the following javascript Code: <script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX - 90; //Get X coodrinates
var mousey = e.pageY - 400; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 90 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 90;
} if ( tipVisY < 90 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 90;
}
//Absolute position the tooltip according to mouse position
tip.css({ top: mousey, left: mousex });
});
});
</script>
As you can see I have set its X position at -90 and y position at -400 so that It could be displaying well when the mouse is hover over a link and it do appear well in the testing page http://bloghutsbeta.blogspot.com/201...slidernav.html If you put your mouse over ALEX in 'A' category BUT from the same test site but in different location from above here http://bloghutsbeta.blogspot.com/201...ting-main.html if you put your mouse over ALEX under 'SIMULATION' category then you will see that the tooltip is way down. Not even that the tooltip moves away if the screen resolution changes. I changed value again and again but didn't reach any conclusion, can someone help me with this issue as what to do to fix it? Note: If you require a complete markup please let me know in comment, I considered it not required that's why I didn't added it to my post ^^ I have a the following code for displaying a tooltip: Code: <a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display"> The javascript for the tooltip is as follows: Code: $(document).ready(function(){
$("a.tooltip").live( {
mouseenter:
function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - 10) + "px")
.css("left",(e.pageX + 20) + "px")
.fadeIn("fast");
var css_width = $('#tooltip').width();
var text_width = $('#tooltip').textWidth();
if (css_width > text_width) {
$('#tooltip').width(text_width);
}
},
mouseleave:
function(){
this.title = this.t;
$("#tooltip").remove();
}
}
);
});
$.fn.textWidth = function textWidth() {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width= $(this).find('span:first').width();
$(this).html(html_org);
return width;
}
What I want to do is to be able to add another variable 'width' to be able to set the width of the tooltip like so: Code: <a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display"> This width will then be passed into the javascript above and used to set the width of the tooltip. How can I modify the above code to do this?? Thanks Hi all, I am fairly new to javascript and finaly found a tooltip script that I want to use. (man there is a lot of them out there). I got it to work no problem and the editing is real easy. The problem is that it is a tool tip for a text link. Would like to know if it is possible to use this with an image that is linked to a site. The script and code is at http://www.javascriptkit.com/script/...ltooltip.shtml The part that I think needs editing is Code: <a href="http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml" rel="htmltooltip">RSS Ajax Ticker</a> Either that or the other part in the body section Code: <!--Inline HTML Tooltips (DIV with class="htmltooltip"--> <!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source--> Thanks in advance for any help in this. Scott Is it possible to prevent the tooltip that appears when mousing over an image from appearing? This is without removing the alt or title tags.
hi! i would just like to say first of all, that i only use forums for help unless i've exacerbated all other forms of help as i am such a javascript noob! so please bear with my while i try to explain my problem... i've isolated the javascripts to this page > http://nang-nang.net/tumblr/blog/help.html in this example the plant image is using lightbox 2 and the bird.gif is using prototip2 to create a tooltip (that displays my latest tweet) (i should mention that these scripts will be used to pimp out my tumblr blog/portfolio http://bubblejam.tumblr.com eventually) the problem: i need the tooltip to stay put! i've managed to put the bird in a <div style="position:fixed..." etc so that's fine. but the tooltip isn't fixed and moves as the page scrolls down! can anyone take a look at what javascript i've got so far and fingers crossed there's a simple solution! thanks!! 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;
});
});
I have had trouble with this problem for a while and I'm open to all suggestions. My problem is one of reference and of appending children to the body of the document. What I am trying to do is calculate the height of a tooltip div so that I can position it vertically away from the mouse dynamically based on where the mouse is while it is still over the link. I have a list of anchors set in an unordered list and they have a tooltip attribute: tooltip="tooltip info goes here". Code: initToolTips = function(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
var tip = anchors[i].getAttribute("tooltip");
if(!tip) continue;
var divHolder = document.createElement("div");
var divTop = document.createElement("div");
var divMid = document.createElement("div");
var divBot = document.createElement("div");
divHolder.className = "tooltip"; // color:#333;
divTop.className = "tooltiptop"; // background:url(...) ;
divMid.className = "tooltipmid"; // background:url(...) repeat-y;
divBot.className = "tooltipbot"; // background:url(...);
divHolder.appendChild(divTop);
divHolder.appendChild(divMid);
divHolder.appendChild(divBot);
var atts = divHolder.style;
anchors[i].onmouseover = function(e){
divMid.innerHTML = e.target.getAttribute("tooltip");
document.body.appendChild(divHolder);
alert(divHolder.style.height); //divHolder is
}
anchors[i].onmousemove = function(e){
var ie = (document.all);
if(ie){
atts.marginLeft =(event.clientX) + "px";
//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
else{
atts.marginLeft = (e.pageX) + "px";
//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
}
anchors[i].onmouseout = function(e){
document.body.removeChild(divHolder);
}
}
}
The initToolTips function is called from a window.onload. The problem is that in the onmouseover function i cannot get to the height attribute of the div anymore, I have had people tell me that the reference is gone when the function ends so I cannot use the divHolder variable like that. I have also had people tell me that I cannot reference height values when the object does not exist yet. To me it looks like the div tooltip object exists after the onmouseover function but i cannot obtain a reference to it. I have thought about setting an attribute of the anchor tag the creates the div like offsetToolTipY='divHolder.style.height'; but i can't get a reference of the height outside of the onmouseover function because it hasn't been appended to the document yet. The only other thing I could think of was to setup the div completely and set the display:none; attribute and then append it to the document (all outside of the onmouseover function). And then the onmouseover function would only set the display:inline; but again this did not work because for some reason it still does not have the height information. here is the code for that example: Code: wren.initToolTips = function(){
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
var tip = anchors[i].getAttribute("tooltip");
if(!tip) continue;
var divHolder = document.createElement("div");
var divTop = document.createElement("div");
var divMid = document.createElement("div");
var divBot = document.createElement("div");
divHolder.className = "tooltip";
divTop.className = "tooltiptop";
divMid.className = "tooltipmid";
divBot.className = "tooltipbot";
divHolder.appendChild(divTop);
divHolder.appendChild(divMid);
divHolder.appendChild(divBot);
var atts = divHolder.style;
atts.display = "none";
document.body.appendChild(divHolder);
anchors[i].onmouseover = function(e){
divMid.innerHTML = e.target.getAttribute("tooltip");
atts.display = "inline";
//alert(divHolder.style.height); //alerts nothing
}
anchors[i].onmousemove = function(e){
var ie = (document.all);
if(ie){
atts.marginLeft =(event.clientX) + "px";
//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
else{
atts.marginLeft = (e.pageX) + "px";
//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
}
}
anchors[i].onmouseout = function(e){
atts.display = "none";
}
}
}
I can't get any height information from the dynamically created div at all. Any Help is immensely appreciated. Thank You. -Jon |
|||||||