We Keep Coding

Using FeatherLight to show a DIV

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.

Click on Link to show data on div and Link Disappear is not working

What I need
I need when user click on link data is shown.
link disappear after click.
I have tried code
<a href="javascript:void(0);" class="viewdetail more"
style="color:#8989D3!important;">view details
<div class="speakers dis-non">
</div>
</a>
jquery code
$('.viewdetail').click(function() {
$(this).find('.speakers').show();
$(this).find('.viewdetail').hide();
});
problem
when I click on view detail link data is shown on div.
link doesn't disappear.
if I put anchor before div then data is not shown on speaker class div.
any suggestion are most welcome.
jsfiddle: http://jsfiddle.net/fw3sgc21/

Since the div is inside the anchor, the div will also be hidden if you hide the anchor. You need to put the div next to the anchor to make it work. Use next() method to select the div.
HTML
view detail
<div class="speakers dis-non" style="display: none">
test data to be shown
</div>
JS
$('#viewdetail').on('click', function(){
// show div with speakers class next to the anchor
$(this).next('div.speakers').show();
// hide the anchor
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/2/
EDIT
If you want to wrap the speakers div inside another div as below
view detail
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
with the following CSS
.dis-non
{
display: none;
}
Here's the JS that should show the speakers div and hide the clicked anchor
$('#viewdetail').on('click', function(){
$(this).next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/6/
EDIT 2
If you want to put the anchor inside two divs as below
<div class="a">
<div class="b">
view detail
</div>
</div>
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div
$('#viewdetail').on('click', function(){
$(this).parent().parent().next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/8/

Try the following:
$('.viewdetail').click(function()
{
$('.speakers').show();
$(this).hide();
});
$(this) refers to the .viewdetail so you don't need the find it again
Pull the div outside the hyperlink
HTML:
view details
<div class="speakers dis-non"></div>

try this
html
<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail
</a>
<div class="speakers dis-non">
test
</div>
js
$('#viewdetail').click(function() {
$('.speakers').show();
$(this).hide();
});
http://jsfiddle.net/fw3sgc21/1/

First of all this in your code refers to to the clicked link itself.
So this line $(this).find('.viewdetail').hide(); doesn't work, because there is no .viewdetail inside of link. It should be
$('.viewdetail').on('click',function(e) {
var self = $(this);
self.find('.speakers').show();
self.hide();
});
But, if you hide your link, the .speakers will be also hidden, because it's inside of your link. If you want it to be visible, you should place it outside of link
For example:
view details
<div class="speakers dis-non"></div>
And JS:
$('.viewdetail').on('click',function(e) {
var self = $(this);
e.preventDefault(); // prevent link from working the way it should
self.next('.speakers').show();
self.hide();
});

want to show or hide section of html page when it loads be default based on text box check option on top of the page

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.

Jquery pop-up using fancybox

I've a button clicking on which it shows a pop-up message. Code is given below:
<a id="report_button_id" href="#report_form_container" class="form_show_link" style="text-decoration: none; cursor: hand">
<span id="report_button_text_id" class="top_nav_report_button">My Link Here</span>
</a>
<div style="display:none;">
<div id="report_form_container" class="popup_container">
// Some page is displayed here using div tags
</div>
</div>
In Javascript file:
$("a.form_show_link").fancybox({
centerOnScroll:true,
overlayOpacity:0.7,
overlayColor:'#000000',
showCloseButton:false,
hideOnOverlayClick:false,
onStart:resetPopupFormErrors
});
$("#report_form").keypress(function(e) {
if(e.which == 13){
$("#report_form").submit();
}
});
Can any one explain how the above code is displaying pop-up windows on clicking button especially when the style is none????
Thanks!

If I understand your question ('how does this work?'), it is prett simple... Fancybox is moving the target div out of its old container and into a temporary one that it controls. As such, its parent containers no longer have influence on the target (such as 'display:none').

How to stop a button from toggling within div tag using jQuery?

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.