I am using the featherlight lightbox plugin to show the contents of a DIV when a button is clicked.
Here is my button:
<INPUT id="mileageButton" <cfif #get_trips.recordcount# NEQ 0>style="color:red; font-weight: bold;"</cfif> class="mileage" Type="BUTTON" VALUE="Mileage" onClick="$('##mileage-modal-open').trigger('click');"> <a id="mileage-modal-open" href="##" data-featherlight="##mileage" ></a>
Here is my DIV:
<div id="mileage" style="display:none;">
</div>
The problem I am having is that I do not want to DIV to be visible until the button is clicked, so I set the display attribute to 'none'. However it stays hidden all the time and consequently my lightbox is empty.
How can I have the attribute changed to 'block' when I click the button but back to 'none' when I close the lightbox?
Keep your DIV visible and put it inside another one that is hidden. That way, when featherlight opens it, it will show up.
Related
I'm triggering Fancybox popup automatically when the page is loaded.
Inside that popup there's a HTML content with link to other page.
That link doesn't work when it's loaded with Fancybox.
Here's my code:
<div class="popup">
<div class="container">
<h4>Description text...</h4>
<a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
</div>
</div>
<script>
$(document).ready(function() {
$('.popup').fancybox({
transitionEffect : "zoom-in-out",
}).trigger('click');
});
</script>
How can I set that link to work?
I'm using Fancybox v3.1.28
First, links, buttons, etc are working perfectly fine in fancybox.
The problem in your example is caused by the fact that you have used .popup selector to initialize fancybox, but that matches element containing your link. So, your code can be translated to 'start fancybox when user clicks on element having class ".popup"'. But, your link is inside element with class name ".popup", therefore it starts fancybox.
Finally, your code does not make any sense. If you wish to immediately start fancybox, then use $.fancybox.open() method, see https://fancyapps.com/fancybox/3/docs/#api for samples
I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.
Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">
I have an html where I have bunch of text controlled by a show hide button, (say this code snippet is para). Now I would like to add additional layer of control on top of that. I would like to have a text box on top of the html page when it loads to have a option to hide or show para by default based on check uncheck of the text box.
Here is my code para
print $indexfd
qq~<div id="div_$var3">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$var3')" type="button" id="btn_show_$var3" value="showit">\n~,
qq~<input onclick="hideit('$var3')" type="button" id="btn_show_$var3" value="hideit"><br/>\n~,
qq~<ol id="$var3" style="display: none"><li><b>$var3->{name} \: $var3->{value}</b></li></ol>\n~,
qq~</div>\n~;
This isn't something Perl can do for you. You will need to do it in JavaScript. Have a look at the jQuery lib's function toggle(). That should do what you want. Add your paragraph and add some sort of button or whatever. Then add a click-handler to that button to toggle the paragraph.
Here's an excerpt from the documentation:
We can animate any element, such as a simple image:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
We will cause .toggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
Don't forget to load the jQuery files in the <head> section of your HTML document.
When the user clicks on topic_tag_sug or any of its child elements, that div should not hide. But when the user clicks on any other element, topic_tag_sug should hide.
HTML
<input id='topic_tag' onblur="$('#topic_tag_sug').hide();"/>
<div id='topic_tag_sug' style='border:1px solid #000'>here is tag suggestion zone, i want to click here to select tag suggestion, and it will not be hide</div>
JavaScript
$('#topic_tag').focus();
http://jsfiddle.net/Q7hFw/2/
I am amusing that you want to hide the suggestion box on some other event. Let's add one close button inside the box itself,
<input id='topic_tag' />
<div id='topic_tag_sug' style='border:1px solid #000;display:none;'>
here is tag suggestion zone, i want to click here to select tag suggestion, and it will not be hide
<br>
<a id="close" href="#">X: Close</a>
</div>
Now add some javaScript code using jQuery
$(document).ready(function() {
$('#topic_tag').bind('click', function() {
$('#topic_tag_sug').show();
});
$('#close').bind('click', function() {
$('#topic_tag_sug').hide();
});
});
Please find working example here
I have a link which triggers div tag to toggle. The problem is that I don't want my button(which is within the div), to toggle. How do I stop it from toggling?
This is my html code:-
Upload Videos
<div id="uploadVideos" class="menu">
<input name="submit" type="submit" value="Upload" id="btn" />
</div>
This is my jQuery code:-
$(document).ready(
function upload(){$("#uploadVideoLink").click(
function uploadTog(){$("#uploadVideos").toggle();}
);}
);
You need to get it outside the <div> you can't hide an element without all the elements inside of him. It's just the way DOM is.
If you mean that you don't want to hide the button that's not possible i think as long as the button is inside the div becuase toggle() assign display: none; to the div thus hiding everything inside it
One thing you could do is this one (this would toggle all elements inside the div but not the button):
Upload Videos
<div id="uploadVideos" class="menu">
<div>sometext</div>
<input name="submit" type="submit" value="Upload" id="btn" />
<div>sometext</div>
</div>
$(document).ready(
function upload() {
$("#uploadVideoLink").click(
function uploadTog() {
$("#uploadVideos *:not(#btn)").toggle();
});
});
fiddle
http://jsfiddle.net/K5NL4/
If I understand correctly, you will need to move the button outside the div. With a little styling you should be able to get the interface to look right.
Either position the toggled-on DIV on top of the outside button, and place another identical button inside the DIV on top of the original button. Or position the toggled-on DIV adjacent to/just below the button, and just create a border that makes it seem like the button is now 'part' of the toggled DIV.