When the javascript action below is called (prettyPhoto lightbox), I need to modify the style of the body to make overflow:hidden and position:fixed.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']") .prettyPhoto({
});
});
</script>
So, I need to insert something like:
$('body').css('overflow','hidden');
$('body').css('position','fixed');
...but ONLY when the lightbox is open.
Basically, I need to stop the body from scrolling while prettyPhoto is active. Any ideas?
Try putting some basic JavaScript code in the function wich opens prettyPhoto.
Like this:
document.getElementById(BodyId).setAttribute("class","body_noscrolling");
And make a css value for the body (.body) in wich you disable scrolling:
.body {
}
.body_noscrolling {
overflow: hidden;
position: fixed;
}
Also change the <body> tag:
<body id="BodyId" class="body">
If you have a >CLOSE< button in your 'prettyPhoto', add this to the code of that button:
document.getElementById(BodyId).setAttribute("class","body");
I'm not really sure if it will work as I don't know how your prettyPhoto function is called.
Related
I have NEXT and PREVIOUS buttons on my screen. When the page initially loads I want the Previous button to be hidden and as soon as user clicks the Next button I want Previous button (div tag to be visible). I have a CSS property for Previous button where I am setting the visibility value to False.
And also an if statement where I check to see if page counter is greater than 1 then change the visibility of navigationButtonTop to true. It is not working..what am I doing wrong !?
$(function() {
$("#navigationButtonTop").css("visibility", "visible");
});
div.navigationButtonTop {
visibility: hidden;
height: 100px;
width: 100px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationButtonTop"></div>
firstly you have not closed your if statement and navigationButtonTop is a class not a id try this.
if (that.get("pageCounter") >= 1) {
$(".navigationButtonTop").css("visibility", "visible");
}
as the OP has edited his question the new answer would be:
$(function() {
$(".navigationButtonTop").css("visibility", "visible");
});
First of all, the code of how you actually like to trigger the event, would be nice to know. Maybe the trigger is not working at all?
Additionaly you addressed differently. In CSS navigationButtonTop is a class (see the ".") and in JS it's an id (see the "#"). Is this the culprit in your atual code? If not I'll assume it's an id further...
For more readability try to move your visibility: hidden to an extra hidden class. So you just can trigger:
$("#navigationButtonBottom").on('click', function() {
$("#navigationButtonTop").removeClass('hidden');
});
And in you HTML add the class hidden to your button
#navigationButtonTop.hidden { visibility:hidden; }
Or do it using javascript:
jQuery(document).ready( function($) {
$("#navigationButtonTop").addClass('hidden');
})
In your JS you use ID ("#" sign before selector's name). But in your CSS you use CLASS (dot sign before selector's name).
Try to use "#" in both cases (or dot accordingly).
Havde you tried $("#navigationButtonTop").show();
Here a good jQuery plugin that saved me in a Materialize's collapsible customization, to avoid the use of a click event replaced with this visibilityChanged event.
In particular, the used code (among the various alternatives described in the plugin page) has been:
HTML
<li id="collapsible_trigger">
<div class="collapsible-header"></div>
<div class="collapsible-body"></div>
</li>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="hideshow.min.js"></script>
JS
$("#collapsible_trigger .collapsible-body").hideShow();
$("#collapsible_trigger .collapsible-body").on("visibilityChanged", function(event, visibility){
/* your custom code here */
});
I have a button which acts as a 'copy url' button. This works fine on none mobile devices, however I believe you can't have such a function on mobile devices as they rely on flash. On most mobile sites users must manually copy URLs.
So, I want to remove my 'copy url' button once a mobile device has been detected.
Before you grill me, yes I've read:
Hiding DIV if using mobile browser
I tried the solution mentioned in that thread, however it does not work. Any idea why? Here is my codepen:
http://codepen.io/rjtkoh/pen/dPxKeg
<head>
<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
</script>
</head>
<div class= "test">yo test me</div>
Much appreciated.
It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:
The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:
Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.
Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.
E.g.:
<script>
$(document).ready(function() {
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
});
</script>
The reason you're seeing this is because the DOM isn't fully built, so when you're trying to access it using $('.test'), it can't get it. You have to wait until it is fully ready.
Wrap your Javascript code in the ready function provided by jQuery:
$(document).ready(function () {
// your code goes here
});
This code will only be executed once all the DOM has been loaded.
Have a look at the documentation.
A simple way to do this is just add class to the html element when match some situation.
And use a selector to hide the elements you want you hide only when the class exist
This allows you to hide element even the <body></body> haven't actully loaded.
Besides, it requires minimal DOM operation.
So it won't lag the page when there are too many elements needed to hide.
Just put the codes in the <head></head>
<script>
if (navigator.userAgent.search("Some thing") >= 0 ) {
/*the html element*/
var root = document.documentElement;
root.setAttribute( "class", "hide-for-compitibility" );
}
</script>
<style>
html.hide-for-compitibility .selectors{
display : none;
}
</style>
Does anyone look at his codepen? Hey guy,
you did not include Jquery while using it. Put this in your HTML section <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
you put your script in wrong section, move it to JS section.
the mobile variable you obtained should be used in an IF statement. Example,
if (mobile)
$('.test').css('display', 'none');
else
$('.test').html('This ELSE leg should be removed');
Finally, getting the opinion of other answers that you should wrap your code inside a $(document).ready() function.
Here is an example and it do work. http://codepen.io/anon/pen/QweBgq
Another way that does not use Javascript is that you use CSS. Try below code in CSS section.
.test {
display: none;
}
#media (min-width: 768px) {
.test{
width: 200px;
height: 50px;
background: red;
display: block;
}
}
I want to use a simple js to deactivate and activate the overflow of the html "body" like this:
$('.my_link').click(function(){
$('body').css('overflow-y', 'hidden');
});
$('.featherlight_background & featherlight_close_button').click(function(){
$('body').css('overflow-y', 'scroll');
});
But I dont finde out the css name of the "featherlight_background" and the "featherlight_close_button" - ... ".featherlight:last-of-type" and ".featherlight-close-icon" dont work ;(.
That´s the script I work with: featherlight
Can anybody help me?
I would suggest solving it using the configuration options of Featherlight instead of adding jQuery events to its elements.
Looking at the Configuration section of Featherlights documentation it seems you can define a function to be called when the lightbox is opened or closed, see beforeOpen, afterOpen, beforeClose and afterClose.
You can either define those functions using a data attribute on the element, e.g. data-featherlight-before-open, by overriding the global defaults, e.g. $.featherlight.defaults. beforeOpen, or by adding them as a parameter to your featherlight call, e.g. $.featherlight('#element', { beforeClose: ... });
I've added a small example that uses the global configuration method to change the text Lightbox is closed into Lightbox is open when opening the lightbox.
$(function() {
$('#btn').featherlight('#lightbox');
$.featherlight.defaults.beforeOpen = setLightboxOpen;
$.featherlight.defaults.afterClose = setLightboxClosed;
});
function setLightboxOpen() {
$('#text').text('Lightbox is open');
}
function setLightboxClosed() {
$('#text').text('Lightbox is closed');
}
.hidden {
display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.js"></script>
<button id="btn">Open lightbox</button>
<p id="text">Lightbox is closed</p>
<div id="lightbox" class="hidden">
Lightbox contents
</div>
When I run the following code and mouseover the href nothing changes (no highlight, no changed cursor). If I hold click on it, the hover event throws the alert.
I have no clue what could be wrong, this is impacting my web project, but also happening with very basic code.
html:
<a href='www.google.com' class='link'>Test</a>
css:
.link{
color: #000;
}
a.link:hover{
font-size: 18px;
color: #00FF00;
}
jsFiddle
Also removing 100% of the jQuery doesn't help either, I was just using that to debug what was going on.
Problem is rather unclear, I can just guess.
I think your page style is locally set to 'none'.
From https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently#w_reset-the-page-style
You may have inadvertently set the page style to No Style. To ensure Firefox is set to use the page's default style:
Press the Alt key to temporarily bring up the traditional Firefox menus, click on the View menu, then select Page Style, then click Basic Page Style.
Now that the page is using its default style, it may be displayed correctly.
(Similiar process for other browsers.)
this will fix your problem:
<script>
$(document).ready(function(){
$('#test').hover(function(){
alert('test');
});
});
</script>
or you can simply use:
<script>
$(function(){
$('#test').hover(function(){
alert('test');
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$('#test').hover(function(){
alert('test');
});
});
</script>
note: USE JQUERY LIBRARY 1.7.2
AND MAKE IT LIKE THIS
<a id="test" href="javascript:void(0)">Test</a>
I'm very new with javascript.
I'm trying to create a tag using document.write (with Wordpress) to add a style that hides images before they are preloaded. I've had to resort to writing a Javascript style to hide the images before they are loaded via CSS. I don't want to actually write it into the CSS file incase the user has Javascript disabled and then the images would never show.
I'm trying to get this code to work:
jQuery(function($) {
document.write('<style type="text/css"> .preload img { display: none; } </style>');
$('#body-wrap').preloadThis();
});
But, it is just overwriting the whole page and making it go blank. How can I stop this? I want to add the tag to the without removing the page. Tried using 'return', no luck.
Sorry, I'm a novice. Thanks in advance.
Using document.write() after the page has finished loading implicitly calls document.open(), which creates a new page. You should generally avoid document.write() and stick to proper DOM creation techniques, or use jQuery's shorthand creation methods:
jQuery(function($) {
$('<style type="text/css"> .preload img { display: none; } </style>')
.appendTo("head");
$('#body-wrap').preloadThis();
});
I'm assuming you can't edit the HTML or CSS files that are loaded by the page to include this rule? If that's the case, and you want these styles applied before the page finishes loading, take `document.write()` out of the jQuery ready handler:
// write() before the document finishes loading
document.write('<style type="text/css"> .preload img { display: none; } </style>');
jQuery(function($) {
$('#body-wrap').preloadThis();
});
This will write the <style> tag immediately after the currently executing <script> tag. Hopefully, this is in your <head> element as <style> is invalid anywhere else, although all browsers should parse it OK either way.
You don't need to add <style> tag, you can just hide them with jQuery:
jQuery(function($) {
$('.preload img').hide();
$('#body-wrap').preloadThis();
});
Don't know how your preloadThis() function works, but I guess it loads images and removes .preload class from img container. If it indeed works like that, this code will not help you - images will stay hidden.