I have a question about your spoiler in this page:
http://jdownloader.org/download/index
When i click on Windows it appears a table but when i click on Linux the content of Windows disappears. I want create a spoiler like this but that the content of one spoiler doesn't disappear when i press another spoiler.
What exactly should I change in this code (html source)?
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./JDownloader.org - Official Homepage_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
That part finds all the ones that are NOT the current (clicked) one and hides them.
Related
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
$(".cardImg").fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}
body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
On line 15-17 I want to click on a blue box and only reveal that picture when I click on it
To show the .cardImg in a .cardDiv when you click on it, use $(this).find('.cardImg') to target the .cardImg in that element instead of targeting all of them with $('.cardImg')
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});
replace $(".cardImg").fadeIn('slow') with $(this).find('img').fadeIn('slow')
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
//$(".cardImg").fadeIn('slow')
$(this).find('img').fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}
body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
Remember that $(".cardImg") is still a 'set' of matched elements, just like $(".cardDiv") is. If you do $(".cardImg").anythingAtAll() then you will perform the function on the entire set of matched elements, which is exactly the behavior you're describing. You want to add an event listener to each of your .cardDiv elements, so this part of your code is correct.
$(".cardDiv").click(function() {
});
Once inside of the function, you want to take an action on the 'specific element' that was clicked. You DO NOT want to take an action on the entire set of matched elements inside $('.cardImg'). So, instead of calling the fadeIn() function on that matched set, call it instead on the the specific element that was clicked. When inside the function, the keyword that gives you the specific element is this. Once you wrap the this keyword inside a jquery wrapper, $( ), like so $(this), you can then perform jquery functions on it, like fadeIn() and find() for example. find() will drilldown the DOM tree from the clicked element and find any elements that match whatever was passed in, in this case we pass in ".cardImg".
Your code should be:
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});
Morning! The following is (I know not the best) jQuery code using the Flip! jQuery plugin. The original flip fires fine, but the revert flip will not function for the life of me. I've tried tons of different things, but no success. This is what I currently have.
Any help will be greatly appreciated!
$('.flip1').bind("click",function(){
var elem = $(".toflip");
if(elem.data('flipped')){
elem.revertFlip();
elem.data('flipped',false)
} else {
elem.flip({
direction:'lr',
dontChangeColor: true,
onBefore: function(){
elem.html(elem.siblings('#flip1Data').html());
}
});
elem.data('flipped',true);
}
});
$('.flip2').bind("click",function(){
var elem = $(".toflip");
if(elem.data('flipped')){
elem.revertFlip();
elem.data('flipped',false)
} else {
elem.flip({
direction:'lr',
dontChangeColor: true,
onBefore: function(){
elem.html(elem.siblings('#flip2Data').html());
}
});
elem.data('flipped',true);
}
});
$("#flip1back").bind("click",function(){
$('.toflip').revertFlip();
return false;
});
$("#flip2back").bind("click",function(){
$('.toflip').revertFlip();
return false;
});
The following code performs left and reverse flip. If you want to change flip direction, simply change direction property on JS code. Don't forget to upload necessary JS files to your folder (you can see them at the bottom of HTML code). Here's a link to the working example.
CSS:
.button {
display:inline-block;
padding:10px;
color:#fff;
cursor:pointer;
margin-top:40px;
}
.button#left {
background-color:green;
}
.button#revert {
background-color:red;
display:none;
}
#flipbox {
width: 500px;
height: 200px;
line-height: 200px;
background-color: #ff9000;
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
font-size: 2.5em;
color: #ffffff;
text-align: center;
}
HTML:
<div id="flipbox">front content</div>
<div class="button" id="left">left</div>
<div class="button" id="revert">revert</div>
<!-- JavaScript at the bottom for fast page loading -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript">
$(function(){
$("#left").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: "rl",
color: "#39AB3E",
content: "back content",
onBefore: function(){$("#revert").css('display','inline-block');}
})
return false;
});
$("#revert").bind("click",function(){
$("#flipbox").revertFlip();
return false;
});
});
</script>
EDIT
Revert button is shown only after first left flip: there's no way to revert a flip if you still haven't do it :) Code and working example are up to date.
To change selector so it only show/hides when i click the image i put spoiler/ popdown menu directly after .OS image. Right now the popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
But the code isn't perfect because when i click the 1st MAC both spoilers are opened.
But I want that spoilers are opened one at a time
But the main problem is that I can't fix the javascript code properly inside these types of spoilers (dokuwiki class) inside <td> tags:
This is the javascript code I use :
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./zzzz_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(".details").is(":visible"))
{
$(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(".details").hide("slow");
});
$(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
I thought about doing a video to better explain the problem and provide the local version of files for testing code:
Thanks in advance
This code works:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
I don't know what you're asking but here is what I think you want:
When clicking on an image, show the details below it and hide all others. If the details are already visible, hide them. Clicking something inside the details should not affect anything.
Demo
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
var details = $(this).next(".details");
$(".details").hide("slow");
if(details.is(":hidden")) {
details.show("slow");
}
});
});
I've got a small page with two links that load content into a div dependant upon which link is pressed.
Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.
I'm attempting to do this with my current function using the following however it isn't working:
Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.
Thanks!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
Full code:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat;
width:520px;
height:576px;
}
#video {
position:relative;
background:#000;
top:275px;
left:55px;
width:400px;
height:222px;
}
#stream-controller {
position:relative;
left:55px;
top:285px;
width:200px;
}
</style>
</head>
<body onLoad="loadContent(1);">
<div id="fb-root"></div>
<div class="container">
<div id="video">
</div>
<div id="stream-controller">
<p>STREAM 1 | STREAM 2</p>
</div>
</div>
</body>
</html>
One issue is your selector for the active link:
$('active').removeClass('active');
should be:
$('.active').removeClass('active');
The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:
<a class="stream active" href="streams.php?o=1">STREAM 1</a>
with the jQuery code:
$(function() {
$('a.stream').click(function(e) {
var $this = $(this);
$("#video").load($this.attr('href'));
$('.active').removeClass('active');
$this.addClass('active');
// prevent default link click
e.preventDefault();
})
});
Why don't you just do it in CSS?
a {
color:#fff;
text-decoration: none;
}
a:active {
color:#00d2ff;
}
editing out a part of my solution : ninja'd and a much better one from nrabinowitz
To toggle the "active" class to the link pressed, I would do this:
var $a = $("a");
$a.click(function() {
$a.removeClass("active");
$(this).addClass("active");
});
I've got a test site here (still in development) and I'm trying to get the little notification at the top to stay hidden once you click close.
Currently my script is like this:
<style type="text/css">
<!--
.hide {
display:none;
}
.show {
display:block;
}
-->
</style>
<script type="text/javascript">
<!--
var state;
window.onload=function() {
obj=document.getElementById('alert');
state=(state==null)?'show':state;
obj.className=state;
document.getElementById('close').onclick=function() {
obj.className=(obj.className=='show')?'hide':'show';
state=obj.className;
setCookie();
return false;
}
}
function setCookie() {
exp=new Date();
plusMonth=exp.getTime()+(31*24*60*60*1000);
exp.setTime(plusMonth);
document.cookie='State='+state+';expires='+exp.toGMTString();
}
function readCookie() {
if(document.cookie) {
state=document.cookie.split('State=')[1];
}
}
readCookie();
//-->
</script>
and then:
<div id="alert" class="show" style="float: left; width: 100%;"><div style="width: 80%; text-align:left; float:left;">Sorry for the downtime, we were experiencing some problems with our web host. Everything should be back to normal now =D</div>
<div style="width: 18%; text-align:right; float:left; padding-right: 20px;">close</div> </div>
but it doesn't seem to work. Any ideas?
Thanks in advance!
Sam
First of all, you need to fix readCookie, your call to split will return everything after "State=", which will be stored in the first offset of the returned array, so instead do this:
function readCookie() {
if(document.cookie) {
var tmp = document.cookie.split(';')[0];
state = tmp.split('=')[1];
alert(state);
}
}
For me, it does work (Firefox 3.5, Windows XP). But the div will not disappear before the site has finished loading. You might want to set the div to style="hide" in the first place and have it appear after the page has loaded.