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>
Related
I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>
It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.
You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm including a widget in a page using PHP. The widget includes the following jQuery code, which is making all links open in an external page. Is there any way to override or neutralize this code so it no longer affects all links on the page?
Ideally, I'd like to wrap the widget in a div and specify those links to open in a _blank.
I am new to jQuery, so I appreciate any help offered.
$(document).ready(function() {
// change all links to open outside iframe
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
If you do as you say and wrap your widget in a div like this:
<div class="container">
<!-- Your widget -->
</div>
You can select only the links inside that container like this:
$(".container a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
.container a selects anchor elements (links) that are children to that containing div, and will run your function on them.
Try it code
$(window).ready(function() {
$("a").each(function(index) {
$(this).attr("rel", "external").attr("target","_blank");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Peace of Paris
i have a SideBar Menu, how can i keep it open? If you go to the page, the Menu is closed and i must click on the Menu Button, to toggle it on. How can i keep it open, i'll close it myself.
Code:
<script type="text/javascript">
$('#nav-btn').click(toggleMenu);
$('main').click(function() {
if ($(this).hasClass('active')) {
toggleMenu();
}
});
function toggleMenu() {
$('#nav-btn, #sidebar, main, #cover').toggleClass('active');
}
</script>
for better practice, write your code inside a .js doc and put your code inside a
$( document ).ready(function() {
// Your code here
});
And not inside a <script> tag..
You can just add the active classes inside the HTML element (wihthout jQuery), if debugging is the purpose.
Try replacing toggleClass with addClass, should help.
Please edit your question and provide the full code (html & css) so we can help you further
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 would like to create a popup window in the middle of the web browser when the mouse pointer enters and leaves the elements. The pop up window shows an image that I provide.
How should I implement this in Jquery? Or is there any good plugin to do it?
Thanks
Try jQuery UI dialog box.
DEMO
Bind the event handler to a mouseout event. See the link for more info:
http://api.jquery.com/mouseout/
One way to approach the problem is to create a div(which will hold your popup window) and use the hide and show jquery effects along with it.
That's quite easy, you can do it like that:
$('.hovered_element').mouseenter(function() {
// you can use some plugin here, or just a simple .show()
$('.popup_element').show();
//if you want popup to fade in
//$('.popup_element').fadein(600);
});
$('.hovered_element').mouseleave(function() {
// again: any js plugin method, or just .hide()
$('.popup_element').hide();
//if you want popup to fade out
//$('.popup_element').fadeout(600);
});
Of course you need to style your .popup_element so it shows up in the center, or anywhere you like.
Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog() capability (they call it a "widget"). Here's how it works:
(1) Include both jQuery and the jQueryUI libraries in your <head></head> tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(2) Create an empty div in your HTML, and initialize it as a dialog:
HTML:
<div id="myDlg"></div>
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3) Then, when you are ready to display the dialog, insert new data into the myDlg div just before opening the dialog:
$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');
Note that you can put any HTML in the html() method, including an image.
The above code allows you to change the content of the dialog and use the re-same dialog DIV each time.
Here's what the working example would look like:
jsFiddle Demo
HTML:
<div id="myDlg"></div>
<div id="questiona" class="allques">
<div class="question">What is 2 + 2?</div>
<div class="answer">4</div>
</div>
<div id="questionb" class="allques">
<div class="question">What is the 12th Imam?</div>
<div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>
jQuery:
var que,ans;
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto',
buttons: {
"See Answer": function(){
$('#myDlg').html(ans);
$('.ui-dialog-buttonset').next('button').hide();
},
"Close": function(){
$('#myDlg').html('').dialog('close');
}
}
});
$('.allques').hover(
function(){
//hover-IN
que = $(this).find('.question').html();
ans = $(this).find('.answer').html();
$('#myDlg').html(que).dialog('open');
},
function(){
//hover-OUT -- do nothing
}
);
Resources:
How to use Plugins for PopUp
http://jqueryui.com/dialog/
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
jQuery UI Dialog Box - does not open after being closed
Dynamically changing jQueryUI dialog buttons
jQuery UI dialog - problem with event on close