I've tried adding a manual "Pause" and "play" button to my frontpage slider (It uses cycle-plugin) is what I'm using. I've tried refering to the cycle plugin examples to get mine working, but my lack of java / jquery knowledge has me slightly puzzled.
Here is the link to the cycle plugin on what I want to achieve:
HTTP ->> jquery.malsup.com/cycle/pause.html (spam filtering won't let me post this URL for some reason..????)
- Instead of using an input button, I am using a div with ID's of the following:
From what I understands its not as easy as adding "Next" and "prev" buttons as the cycle plugin doesn't except div ID's as an option for advancing and pausing the slideshow.
For the pause button the javascript in question is as follows (taken from the cycle-plugin website):
$('#pauseButton').click(function() {
$('#s1').cycle('pause');
});
Obviously I would change #pauseButton to #slider_pause. What would I change #s1 to?
The wordpress them I am using currently has the following setup to make the cycle-plugin work. Where would I add it at this point?
Here is the currenty wordpress theme file code that integrates the cycle=plugin:
<?php
$jcycle_timeout = get_option('ka_jcycle_timeout');
$jcycle_pause_hover = get_option('ka_jcycle_pause_hover');
if ($jcycle_pause_hover == "true") {$jcycle_pause_hover_results = '1';}
else {$jcycle_pause_hover_results = '0';}
echo '<script type="text/javascript">
//<![CDATA[
TTjquery(window).load(function() {
TTjquery(\'.home-banner-wrap ul\').css("background-image", "none");
TTjquery(\'.jqslider\').css("display", "block");
TTjquery(\'.big-banner #main .main-area\').css("padding-top", "16px");
TTjquery(\'.home-banner-wrap ul\').after(\'<div class="jquery-pager">
</div>\').cycle({
fx: \'fade\',
timeout: '.$jcycle_timeout.',
height: \'auto\',
pause: '.$jcycle_pause_hover_results.',
pager: \'.jquery-pager\',
cleartypeNoBg: true,
prev: \'#prev1\',
next: \'#next1\'
});
});
//]]>
</script>';
?>
Unfortunately its on a localhost development at the moment and I don't have the ability to upload it ATM
#s1 it is element that contains images that should be cycled so if you name it as #s1 it should stay #s1
<script>
$(function() {
$('#slider_pause').click(function() {
$('#s1').cycle('pause');
});
});
</script>
<div id='s1'>
<img....
<img....
<img....
</div>
Related
So I have several divs that i assigned a class to. Each div has a header. The contents underneath each header are dynamically generated via php. Certain times of the year these divs contain no information but the header still displays. I want to hide the divs that do not have any paragraphs inside of them I cannot quite get them to work and I have a feeling it has to do with the paragraphs being generated by php.
EXAMPLE:
<div class="technology_connected article_headers">
<h3>TECHNOLOGY CONNECTED</h3>
<?php echo $tools->article_formatter($articles, 'Technology Connected'); ?>
</div>
Here is my Jquery code.
$(document).ready(function() {
$(".article_headers").each(function() {
if ($(this).find("p").length > 0) {
$('.article_headers').show();
}
});
});
Try this:
$(document).ready(function() {
$(".article_headers").each(function() {
if ($(this).find("p").length > 0) {
$(this).show();
}else{
$(this).hide();
}
});
});
DEMO
As noted by #JasonP above, this really should be done server side. However, since you do want it done server side, you can simplify the process greatly. Generate the data server side as you're doing. Make sure all <div> tags are visible. Then in your JavaScript use the following selector:
// Shorthand for $(document).ready(function() { ... });
$(function () {
$('.article-headers:not(:has(p))').hide();
});
The selector above targets all elements with the class .article-headers that do not contain a <p> tag and hides them.
JSFiddle demoing the above as a toggle button to show or hide the no paragraph sections.
My goal is to have a button on each side of my iframe (which contains a calendar) which toggles back and forth between calendar #1 and calendar #2 in a single iframe.
Any suggestions?
|arrowLeft| |-----Iframe-------| |arrowRight|
The code works in jsfiddle but doesn't work when I put all the code into my website.
Why is that?
HTML:
<p id="toggle">
<span> Left </span>
<span> </span>
</p>
<div id="left"> <iframe>LEFT CONTENT</iframe> L</div>
<div id="right"> <iframe>RIGHT CONTENT</iframe>R </div>
<p id="toggle">
<span></span>
<span> Right </span></p>
CSS:
#right { display:none; }
Script:
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
Since you say you have loaded jquery..
Probably your onclick setter (the jquery code) is run before the document is loaded (and as such there are no elements in document.body at that moment to set).
In jsfiddle ('No-Library' pure JS) code is wrapped (by default) in:
window.onload=function(){
// your code here
};
That should already do the trick.
This is what jsfiddle does when you select the (default) option 'onLoad' in the options panel on the left, under "Frameworks & Extensions".
If you would select 'onDomready' then your code would (currently) be wrapped in a function called VanillaRunOnDomReady, like this:
var VanillaRunOnDomReady = function() {
// your code here
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
Note that this eventually still ends up in a window.onload like the 'onLoad' option.
If you'd load library JQuery 1.9.1 then things change (a little).
The option 'onLoad' then wraps your code like this:
$(window).load(function(){
// your code here
});
Note that this is essentially still the the same as the first option in this answer, but then in the JQuery way.
If you'd select the option 'onDomready' (whilst the JQuery library is loaded in JSFiddle), then your code would be wrapped in:
$(function(){
// your code here
});
As ErikE pointed out in the comments below, since you already load and use JQuery you might also want to use yet another JQuery way:
$(document).ready(function() {
// your code here
});
Finally as ErikE also pointed out in his comment to your question (a serious problem I overlooked), id's are meant to be unique. Whereas you gave to both paragraphs the id "toggle".
You should instead give them the class "toggle" and select the elements by class to assign the onclick function.
I list a lot of users on my page and I use a php function to pass the user's id and return a div pop up that displays their online status, avatar, stats etc. The problem is that the code is currently set to show the layer onmouseover and hide the layer onmouseout. I would like the code to be onclick show, and second click (either toggle on the same link or click anywhere else on the page) hide the layer but I'm not sure how to accomplish that.
The current code I'm using I got from Dynamic Drive. (sorry my tab key won't work in this text box, not sure how to fix that. feel free to edit)
SKIP TO BOTTOM
Original Method:
Javascript part
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
PHP part
$username = "<a onMouseover=\"ddrivetip('<Center><font class=f2>$username</font><BR>$avatarl</center>
<table align=center><Tr><Td><b>Points:</b> <font class=alttext>$user_points</font>
<BR><B>Posts:</b> <font class=alttext>$user_posts</font><BR>$user_status</td></tr></table>
<BR><img src=$icons/add-user.png height=12> <a href=$cs_url/friends/add/$user>Send Friend Request</a>
<BR><img src=$icons/user_message2.png height=12> <a href=$cs_url/messages/compose/$user>Send Message</a>
<BR><img src=$icons/user_im2.png height=12> Instant Message')\"
onMouseout=\"hideddrivetip()\">$username</a>";
My primary reason for wanting the toggle/blur as opposed to mouseout is so that users have the chance to actually click the links inside of the div layer.
The reason why I am trying to stick to this script as opposed to other ones out there I've found is because it doesn't rely on unique ids or alot of css styles. With other scripts, when I click on one username, they all of the hidden divs on the page pop up, or at least all of them for that user. This seemed to be the best for showing just one at a time.
I decided to scrap the method above. I have a script that I also got elsewhere that I use to toggle a twitter-like login in. I was wondering how I could use it to toggle the user information layer.
Second Method:
Javascript
$(".users").click(function(e) {
e.preventDefault();
$("fieldset#users_menu").toggle();
$(".users").toggleClass("menu-open");
});
$("fieldset#users_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.users").length==0) {
$(".users").removeClass("menu-open");
$("fieldset#users_menu").hide();
}
});
PHP part
<div id='container' class='users_container'>
<div id='usersnav' class='usersnav'> <a href='<?php echo $cs_url; ?>/users/all' class='users'><span>Fans</span></a> </div>
<fieldset id='users_menu'>
content
</fieldset>
</div>
The problem with this method as I mentioned before is that when I click on the username link, ALL of the layers for ALL of the users display on the page appear. How can I make it so that only the child layer of the parent link is displayed? Also, is there a way to toggle the layer hidden when anywhere else on the page is clicked?
Starting from your old code I assume you had something like:
elem.onmouseover = showCard;
elem.onmouseout = hideCard;
Well, from there you just need to do something along the lines of:
elem.isShown = false;
elem.onclick = function() {
if( elem.isShown) hideCard();
else showCard();
elem.isShown = !elem.isShown;
}
This ended up being the best solution though there is still one thing I wish was different about it.
This is built upon Dan's response. The reason why it wasn't working before Dan was because the user information was inside tags, I switcher username to span and the content display. The problem after that was when I clicked on one username the layer would popup but it would remain until I clicked on the same link again. So multiple layers would sometimes be on at once.
The following closes the layer when a user clicks on the layer, outside the layer or on the original link. The one little snag is that when clicking on the original link to close the layer you must click twice.
Javascript
<script type="text/javascript">
$(document).ready(function () {
$(".username").click(function () {
$(this).children().toggle();
$('.tooltip_container').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$(".username").click(function () {
$(this).children().toggle();
});
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.tooltip_container').hide();
});
});
</script>
PHP
<span class='username'>$username
<div class='tooltip_container'>
<div class='tooltip'>
Content goes here
</div>
</div>
</span>
So i'm using flowplayer's JqueryTools, tabs for navigation.
Everything i'm loading is really simple. Mainly html tables and forms, and they work great.
Except on one page where i use tablefilter.free.fr's tablefilter. The table filter will not load when i use the tabs. When i just open the php, then everything works fine.
I was wondering if anyone could tell me what i'm doing wrong here? I don't have much experience with javascript.
My main page is really simple.
<script blah blah blah tabletools.js>
<ul class="css-tabs">
<li>Tab 1</li>
<li>Second tab</li>
<li>An ultra long third tab</li>
</ul>
<div class="css-panes">
<div style="display:block"></div>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax', hitory: true});
});
</div>
And the ajax.php's are really simple tables, and for some reason the filter doesn't work when i load the page in the tabs. I load the filter with a class in the table, and i think that may be the problem.
<script type="text/javascript" language="javascript" src="TableFilter/tablefilter.js"></script>
<table id="table1" cellspacing="0" class="mytable filterable" >
Any feedback would be appreciated.
jQuery Tools Tabs & TableFilter
<script type="text/javascript">
$(function() {
$('ul.css-tabs').tabs('div.css-panes > div', {
effect: 'fade',
history: true,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
// only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
if (pane.is(':empty')) {
// load it with a page specified in the tab's href attribute
pane.load(this.getTabs().eq(i).attr('href'), function(){
setFilterGrid('table'+(i+1));
});
}
}
});
});
</script>
The above code should come after including jQuery, jQuery Tools Tabs, and TableFilter files.
Your tables should have an incremental id for each tab like table1, table2, table3, ...
I want to display the image actual view when the mouse is over the thumb sized image. But when the mouse is placed over the first image it appears and then disappears, not the case with the second and following images.
It works perfectly fine in Internet Explorer, but not in Firefox or Chrome.
$file - runs displays all the files in a directory
$id_v - is a simple count on the number of files
$path1 - is the path
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#view').hide();
$('#ig<? echo $id_v; ?>').bind('mouseover', function(ev) {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
});
$('#ig<? echo $id_v; ?>').bind('mouseout', function(ev){
$('#view').slideUp();
});
});
</script>
Please note, my interpretation of your HTML may be completely wrong. Please post all relevant code with your questions. --help us, help you. :op
Please also note (in case you were unaware) that you can edit your question to update with relevant info.
Can't say for sure without seeing HTML, but consider the following:
$('#view').hide();
Here 'view' is an id. IDs must be unique. You can't have them assigned to more than one element.
I'm assuming each item that you want to animate is getting id='view' in your HTML, when you should be doing class='view' in HTML with the following in your javascript:
$('.view').hide()
etc...
Give that a try.
It's hard to tell (for me) without live example...
Did you try to :
preload you images (with css
technique or with preload jQuery
plugin) ?
change mouseover/mouseout by
mouseenter/mouseleave ?
Just for information, in jQuery 1.4, you could use multiple events.
So your code could be rewritten like this :
$('#ig<? echo $id_v; ?>').bind({
mouseover: function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
mouseout: function() {
$('#view').slideUp();
}
});
I would suggest using the hover method instead of the mouseover and mouseout:
<script language="javascript" type="text/javascript">
$(function() {
$('#view').hide();
$('#ig<? echo $id_v; ?>').bind('hover',
// over
function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
// out
function() {
$('#view').slideUp();
}
);
});
</script>
I would also suggest (to make your life a little easier), instead of binding new methods to each new id, just assign a class to each one of them and use
<script language="javascript" type="text/javascript">
$(function() {
$('#view').hide();
$('.some-class').hover(
// over
function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
// out
function() {
$('#view').slideUp();
}
);
});
</script>
There could be a lot of things.
If the image #view is fixed or is showed over the position of the thumbnail it will fire a mouseout in the thumbnail at the moment you show up.
Another thing that may cause that the #view hide instantaneously is that the element #view modifies the position of the whole document, if it is on the top or something like that.
Try to remove the mouseout bind and load the page with Internet Explorer and look how the document is modified.