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.
Related
EDIT: REQUESTED MORE CODE:
In my index.html tags, it contains two divs:
<div id="index-banner">
blabla
</div>
<div id="java-cheatsheet-placeholder"> </div>
Then my java-cheatsheet.html contains:
<div id="content">
<h1>Java Cheat Sheet </h1>
<input type="button" value="Show Keywords" id="keywordButton">
<p> To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the
important keyword(s). e.g. There are <span class="answer">eight</span> bits in a byte. Disable/Enable all the
hidden words by tapping the button at the top right. </p>
</div>
I then have a bunch of code, that is tested and works properly, if I push on the button(with an id of "keywordButton"), it either reveals or hides ALL the span elements with a class of "answer", but if you click on a specific span, it will hide/show that and only that word. This is fully functional on its own. But if I try using this (in my custom.js file):
$("#javaCheatSheet").click(function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it loads the data, but clicking the button or the spans NO longer works, unless I also add
<script type="text/javascript" src="../js/custom.js"></script>
in my java-cheatsheet.html file at the bottom. I of course don't want to do this, and would rather have .on() working with jquery, but if I try what most people have suggested:
$("#javaCheatSheet").on('click', '#keywordButton, .answer', function () {
$("#java-cheatsheet-placeholder").load('../java-cheatsheet/javaSummary2.html');
$("#index-banner").hide();
});
it doesn't even load the html into index.html at all >_>.
Is this what you were looking for?
$("#javaCheatSheet").on("click", "#keywordButton, .answer", function () {
$("#index-banner").load('../java-cheatsheet/javaSummary2.html');
});
Edit:
$("#java-cheatsheet-placeholder").on("click", "#keywordButton, .answer", function () {
// Show/hide answers here
});
You haven't added jquery. With jquery your code works fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see below.
var toggleColorNotVisible = "rgb(0, 0, 0)";
var toggleColorVisible = "rgb(0, 0, 0)";
var backgroundColorVisible = "rgb(255, 255, 255)";
var showAnswersButton = false;
$(document).on('click', '#keywordButton', function() {
if (showAnswersButton) {
$(".answer").css("color", toggleColorNotVisible);
$(".answer").css("background-color", toggleColorNotVisible);
$(".answer").each(function() {
this.hideAnswers = false;
});
} else {
$(".answer").css("color", toggleColorVisible);
$(".answer").css("background-color", backgroundColorVisible);
$(".answer").each(function() {
this.hideAnswers = true;
});
}
showAnswersButton = !showAnswersButton;
});
$(document).on('click', '.answer', function() {
console.log("LOL")
this.hideAnswers = this.hideAnswers || false;
if (this.hideAnswers) {
$(this).css("color", toggleColorNotVisible);
$(this).css("background-color", toggleColorNotVisible);
} else {
$(this).css("color", toggleColorVisible);
$(this).css("background-color", backgroundColorVisible);
}
this.hideAnswers = !this.hideAnswers;
});
.answer {
font-weight: bold;
color: #000000;
background-color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keywordButton {
position: fixed;
top: 10%;
right: 1%;
opacity: 0.9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Show/Hide Keywords" id="keywordButton">
<hr>
<h2> Intro </h2>
<p>Stuff</p>
<hr>
<p>To help with remembering, some keywords will be hidden. Simply click or tap the box to reveal the important keyword(s). e.g. There are <span class="answer">eight</span> bits in a<span class="answer"> byte</span>. Disable/enable using button for all!
I am working on a website for a friend. I use an off-screen CSS menu. The button that invokes the menu is not an HTML button, its listed as a Input and Label.
When using the menu you can still scroll on the main body of the pag. I would like to disable that. The only way I can see how that's possible is to change the body CSS upon clicking the menu label, but i've been at it for a few hours and had no luck. I was planning on adding the following to the body class upon opening the menu:
overflow: hidden;
position: static;
Here's the javascript I have landed on most recently, to no avail. I've tried a boatload, but the HTML "onclick" and then running a script that toggles the body class was my best theory.
HTML
<input data-function='swipe' id='swipe' type='checkbox' value="button"/>
<label data-function='swipe' for='swipe' onclick='noScroll()' value="button"></label>
<div class='sidebar'>
<nav class='menu'>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Imprint</a></li>
<li><a href='#'>Imprint</a></li>
</nav>
</div>
Javascript
noScroll({
$('#swipe').toggleClass('body bodynoscroll');
})
CSS
.body {
font: 12px/1 'Open Sans', sans-serif;
color: $c;
background: $c;
overflow-x: hidden;
}
.bodynoscroll {
font: 12px/1 'Open Sans', sans-serif;
color: $c;
background: $c;
overflow-x: hidden;
overflow: hidden!important;
position: static!important;
}
Website
https://www.brotherhoodgaming.net
Any help is appreciated! I am terrible with javascript, so I'm learning.
Give your label an ID to bind a event to it. Something like this:
<label id="menubuttonlabel" data-function='swipe' for='swipe' onclick='noScroll()' value="button"></label>
And then your JS code would look like:
$(document).on('click', '#menubuttonlabel', function(){
if ($('body').css('overflow') == 'auto'){
$('body').css("overflow", "hidden");
}else{
$('body').css("overflow", "auto");
}
});
No need to change your body css, just enable disable your mouse wheel, if that exactly what you want? Try this... copy paste from my old project.
<script>
function stopWheel(e){
if(!e){ e = window.event; }
if(e.preventDefault) { e.preventDefault(); }
e.returnValue = false;
}
function mousewhellStat(stat){
if (stat) {
document.onmousewheel = null;
if(document.addEventListener){
document.removeEventListener('DOMMouseScroll', stopWheel, false);
}
} else {
document.onmousewheel = function(){ stopWheel(); }
if(document.addEventListener){
document.addEventListener('DOMMouseScroll', stopWheel, false);
}
}
}
$("#menubuttonlabel").click(function(){
mousewhellStat(false);
})
$(".sidebar .menu li").click(function(){
mousewhellStat(true);
$(".sidebar").slideUp(300);
})
</script>
Just copy paste to your page. and see if working well :)
This code should work:
$(document).ready(function(){
$("#{your label id}").toggle(
function(){$("body").css({"overflow": "hidden"});},
function(){$("body").css({"overflow": "auto"});}
);
});
I am trying to create a toggling highlight effect using addClass and removeClass.
<head>
<style>
.box-highlight {
border: 2px solid yellow;
}
</style>
<script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}
$(this).addClass('box-highlight');
});
});
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: silver">
</div>
</body>
The addClass is working properly, but removeClass does not. I know there is a toggleClass method but I am just wondering what is wrong with this code.
You're removing the class, then adding it back with no delay, before the UI can be redrawn. You need to do one or the other, which suggests an else:
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight')
} else {
$(this).addClass('box-highlight')
}
The problem with your code is that it runs very quickly, and you won't see the effect :).
To make such effect, you can use a timer or delay. For example, you can do like this:
$("#box").addClass("box-highlight")
.delay(300).queue(function(next){
$(this).removeClass("box-highlight");
next();
});
Try this................
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}else{
$(this).addClass('box-highlight');
}
});
});
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.
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");
});