This question already has answers here:
jQuery text fade/transition from one text to another?
(6 answers)
Closed 6 years ago.
Is there a way to fade in the text when it changes? I'm using jQuery's html() function. I attempted doing it with fadeOut(), but now it's going back and forth between the fadeIn and fadeOut.
Please let me know if there's a better way to do this, does the constant check on browser resize worse than detect if width is a certain size?
https://jsfiddle.net/jzhang172/uhmubhtf/2/
$(function(){
function screenClass() {
if ($( window ).width() <500){
$(".ok span").html("no");
}
else{
$(".ok span").fadeOut();
$(".ok span").fadeIn().html("yes");
}
}
$(window).bind('resize',function(){
screenClass();
});
});
.ok{
background:blue;
height:300px;
width:300px;
transition:1s;
font-size:30px;
color:white;
}
.span{
color:white;
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"><span></span></div>
I can't comment yet…
I have clone your fiddle and changed the javascript code just a little bit.
https://jsfiddle.net/LoicMars/3gr8fnfn/
$(function() {
yes = true;
no = true;
function screenClass() {
if ($(window).width() < 500 && yes == true) {
$(".ok span").fadeOut(function() {
$(this).fadeIn().html("no");
yes = false;
no = true;
});
} else if ($(window).width() >= 500 && no == true) {
$(".ok span").fadeOut(function() {
$(this).fadeIn().html("yes");
yes = true;
no = false;
});
}
}
$(window).bind('resize', function() {
screenClass();
});
});
I have add 2 variables for preventing the constant fading blink effect when resizing.
Related
This question already has answers here:
Disabling right click on images using jquery
(10 answers)
Closed 5 years ago.
I am currently using this script to prevent right click on one of my site. I have tried different tweaks on the code because I would like it to prevent right click ONLY on images (right click it's everywhere).
Any idea?
Thanks in advance for your help
//Disable right mouse click Script
var message = "Stop trying stealing pics! :P";
///////////////////////////////////
function clickIE4() {
if (event.button == 2) {
alert(message);
return false;
}
}
function clickNS4(e) {
if (document.layers || document.getElementById && !document.all) {
if (e.which == 2 || e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS4;
} else if (document.all && !document.getElementById) {
document.onmousedown = clickIE4;
}
document.oncontextmenu = new Function("alert(message);return false")
Use contextmenu event:
$(document).ready(function() {
$("img").on("contextmenu",function(){
return false;
});
});
img{
width: 50px;
height: 50px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
i want show a div after scrolling 150px just in mobile devices.
this is my code but it doesnt work :
$(document).load($(window).bind("resize", checkPosition));
var phonebox = $(".phonebox");
function checkPosition()
{
if($(window).width() < 460)
{
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
phonebox.show();
}
else {
phonebox.hide();
}
});
}
}
can somebody help me to fix this problem.
thank you
You should not use bind but on instead. And use both resize and load in the same function.
bind is an old version of new added on see here > bind vs on
See jsfiddle
or snippet below ( i used 700 for example purposes only. so it works in snippet )
$(window).on("load resize", checkPosition)
var phonebox = $(".phonebox");
function checkPosition() {
if ($(window).width() < 700) {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(phonebox).show();
} else {
$(phonebox).hide();
}
});
}
}
.phonebox {
top:200px;
height:300px;
width:100px;
position:absolute;
background:red;
display:none;
}
.for_scroll {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phonebox">
</div>
<div class="for_scroll">
</div>
Please try this one,
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll >= 150){
phonebox.show();
}else{
phonebox.hide();
}
});
});
you can try this one as show() and hide() functions are not supported by some of the browsers so this could be a reason.
To hide:
$(".phonebox").css("display", "none");
To show:
$(".phonebox").css("display", "block");
I have made this jQuery script. Its purpose is to add a class to <body> when body is scrolled a certain amount. However nothing happens on scroll. DOM console doesnt show any error messages. I am a complete Javascript-newbie, so I would not be surprised if the problem is a simple markup mistake.
Any help is appreciated.
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33){
$(document.body).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$(document.body).addClass('fix');
} else {
$(document.body).removeClass('fix');
}
});
};
});
body{
height:200vh;
background-color:blue;
}
.fix{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you want to listen to scroll event on window
Try
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33) {
$(window).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$('body').addClass('fix');
} else {
$('body').removeClass('fix');
}
});
};
});
I am attempting to add and remove images contained in divs based on if they are locked or unlocked. Any divs that are unlocked are emptied and a new image is added accordingly.
function dieClicked(){
console.log(this);
if (this.locked == true){
this.locked = !this.locked;
$(this).css("border-bottom", "none");
}
else{
this.locked = !this.locked;
$(".pics").each(function(){
if (this.locked == true){
$(this).css("border-bottom", "solid red 5px");
}
});
}
}
function swapUnlocked(){
$(".pics").each(function(){
if (this.locked == false){
$(this).empty();
$(this).append("<img src='style/images/dice.png'/>")
}
});
}
Both of these functions are called in the main as follows:
$("#newRoll").on("click", swapUnlocked);
$(".pics").on("click",dieClicked);
newRoll is the id for a button, and .pics is the class that all of the divs belong to. Upon clicking a div in the .pics class, a red border will appear and the div will be locked. If the same div is clicked again, the border disappears and it is now unlocked.
When this code is executed, an image will switch as intended when it has been locked and then unlocked via the dieClicked function. However, when some or all of the divs have not been clicked (they are not locked or unlocked) those images do not switch, ie. they are treated as if they are locked. How can I get the images that have not been clicked to be treated as if they were unlocked?
You need to initialize the lock value:
$(".pics").on("click",dieClicked).each(function() { this.locked = false; });
ETA: Have you considered using CSS? You can streamline your code a bit and it would also help keep your styles centralized:
CSS
.locked { border-bottom: solid red 5px; }
JS
function dieClicked(){
$(this).toggleClass("locked");
}
function swapUnlocked(){
$(".pics:not(.locked)").each(function(){
$(this).empty();
$(this).append("<img src='style/images/dice.png'/>");
});
}
I'm not exactly sure if you mean that:
function dieClicked(){
console.log(this);
if (this.locked == true){
this.locked = !this.locked;
$(this).css("border-bottom", "none");
//$(this).remove(); //to delete
//$(this).hide(); //to hide -> can be shown with calling .show() on object
}
else{
this.locked = !this.locked;
$(".pics").each(function(){
if (this.locked == true){
$(this).css("border-bottom", "solid red 5px");
//$(this).show();
}
});
}
}
function swapUnlocked(){
$(".pics").each(function(){
if (this.locked == false){
$(this).empty();
$(this).append("<img src='style/images/dice.png'/>");
this.locked = true;
}
});
}
I have the below jquery statement
$(this).('span.section1').css('background','url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent');
How do I write a if else statement for the css condition. What I mean is if the background image is accordion_closed_left.png then <do this> or else <do this>.
just to be precise <do this> are blocks of statement.
Thanks for your time.
I'd recommend to use a css class instead and then call jQuery's .hasClass() method on it:
css:
.closed {
background: url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent;
}
js:
var $target = $(this).find('span.section1');
if( $target.hasClass( 'closed' ) ) {
$target.removeClass( 'closed' );
}
else {
$target.addClass( 'closed' );
}
How to write this in jQuery with 'guides' as a class name....
<script type="text/javascript" >
function guideMenu()
{
if (document.getElementById('guides').style.display == "none") {
document.getElementById('guides').style.display = "block";
}
else {
document.getElementById('guides').style.display = "none";
}
}
</script>
To naively answer your question:
if ($(this).('span.section1').css('background').match('|/accordion_closed_left\.png"|')) {
}
else {
}
However I support jAndy's answer, .hasClass() is the way to go!