Use Javascript to change body CSS upon clicking a label - javascript

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"});}
);
});

Related

When I try to dynamically load a div, all the classes and ids aren't registering, even with .on

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!

Using jQuery flip, can't get revert flip to fire

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.

Bootstrap twitter like follow button

I need to a a following button like this example
What i should write in java script?
$('.following').hover(function(){
$(this).text("Unfollow");
},function(){
$(this).text("Following");
});
//for toggle the class following/follow When click
$('.following').click(function(){
$(this).toggleClass('following follow').unbind("hover");
if($(this).is('.follow')){
$(this).text("Follow");
}
else{
//binding mouse hover functionality
$(this).bind({
mouseleave:function(){$(this).text("Following");},
mouseenter:function(){$(this).text("Unfollow");}
});
}
});
what changes need to have bootstap button?
You can do this in CSS like so: http://jsfiddle.net/Th4th/
.follow {
width: 100px;
height: 40px;
background-color: gray;
}
.follow:hover span {display:none;}
.follow:hover:before {
content: "Unfollow"
}
I don't think you'll need java script for the button changing, only for taking the action of the click.

The "Hide div before scrolling" codes does not work no matter what

I'm building a local website on the Bitnami Wordpress Stack with the Arras theme, if that's important.
I'm making a fixed menu that I want to show after I have scrolled 190 pixels down on the page. The problem is that anything works, no matter which JQuery or JavaScript code I try. I have searched and searched here on StackOverflow, and I know that this question have been asked numerous times here before - but I have tried every code I could find, and none works. This is my JavaScript/JQuery/HTML/PHP code for my menu, placed in the header.php file:
<div class="medfolg" id="medfolg">
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() > 190){
$('#medfolg').show();
} else {
$('#medfolg').hide();
};
});
});
</script>
<?php
if ( function_exists('wp_nav_menu') ) {
wp_nav_menu( array(
'menu' => 'medfolg',
'menu_class' => 'sf-menu'
) );
}
?>
</div>
And this is the CSS code I have placed in my default.css file:
#medfolg.medfolg {position:fixed;}
#medfolg { text-transform: lowercase; position: absolute; top: 0; width: 100%; background: #f5f5f5; z-index:5000; display: none;}
#medfolg .menu-medfolg-container { width: 980px; margin: 0 auto; }
#medfolg .sf-menu { position: relative; top:3px !important; }
#medfolg .sf-menu a { font-size: 22px; color: #444; margin-right: 15px;}
I desperately need some help - please!
EDIT: I've made a jsFiddle here with only small modifications (Wordpress .php menu cannot be read on other places than Wordpress): http://jsfiddle.net/wHMjr/
For completeness, I will post my code:
First, the code is wrapped with a self-executing function to prevent conflict between libraries:
(function($){
//code goes here, now $ is a local reference to the jQuery object.
})(jQuery)
Then, I create the handler:
var setMenuVisibility = function(){
if($(window).scrollTop() > 190){
$('#medfolg').show();
} else {
$('#medfolg').hide();
};
}
which will be attached to the window's scroll event and change the menu's visibility according to the scroll status.
The attachment is done by binding the function to the event:
$(window).bind('scroll', setMenuVisibility);
//and set the initial visibility
setMenuVisibility();
The last line in the above section sets the initial state of the menu, as it is possible that the initial scroll value would require it to be visible (e.g, a link to a lower subsection of the page).
The entire process is initiated when the document's markup is ready.
See demo here.
Try using vanilla js instaead of $(window).scrollTop() try window.scrollY > 190
for the complete function I would use toggle too so:
jQuery
//Use jQuery to make sure we are using correct function
jQuery(window).on('scroll', function () {
var el = jQuery('#medfolg');
if (window.scrollY > 100) {
el.show(); //Use this to toggle element visibility
} else {
el.hide()
}
});
HTML
<div style="display:none" id="medfolg">
<ul>
<li>Home
</li>
<li>Tutorials
</li>
<li>Articles
</li>
<li>Inspiration
</li>
</ul>
</div>
Demo

Link color change

I have a link called "Navigation" I want the link colour to change as I click on it and stay changed. For example: Default colour is blue. When I click on the link it goes to another tab and the color turns to green and it should remain green.
here is the code so far:
<style type="text/css">
a.specialAnchor
{
font-size: 1em;
text-align: right;
padding: 10px;
padding-right: 15px;
color: #0066FF;
}
a.specialAnchor:link
{
color: #0066FF;
}
a.specialAnchor:visited
{
color: Green;
}
a.specialAnchor:hover
{
color:Orange;
text-decoration:underline;
}
a.specialAnchor:active
{
color: Green;
text-decoration:underline;
}
<asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor"
PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>
This does not give me the results I want Please help.
Basically my webpage looks a something like this:
there are four tabs: A, Navigation, C, D
And in all those four tabs there are links at the bottom of the page.
When you are on A and you click on Navigation link, it will take you to Navigation page. What I want is to change the colour of the link when it is clicked on or visited.
Thank you
Have you tried changing the color of the visited pseudo class to green? Try that and see if works the way you want?
Ok, given that you have a link like this
<a class="spec" href="wherever">Link</a>
You need styles like this
<style type="text/css">
.spec:link {color:#FF0000;} /* unvisited link */
.spec:visited {color:#00FF00;} /* visited link */
.spec:hover {color:#FF00FF;} /* mouse over link */
.spec:active {color:#0000FF;} /* selected link */
</style>
Done on the tryit editor at w3schools :)
If changing your :visited pseudoclass doesn't give you what you want, try changing the style onclick with jQuery:
$('a.specialAnchor').click(function() {
this.style.color = 'green';
}
Try something like this
$(document).ready(function () {
$('.changecolor').click(function () {
$(this).css("color", "red");
});
});
<a class="changecolor">Click To Change</a>
If you need to change the color back to what it was, you can use .toggle()

Categories