We Keep Coding

Link inside the Fancybox popup

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

Can I show one div, hide all others, based on clicking its assigned button?

This seems to be a common question, however when I check the answers, they're all different.
I have a row of five links. Each has a corresponding div below. When I click a links, I want its div to display and all others to hide.
Here's some code I came across that seems to be on the right track:
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
But if I use "a" without a destination, clicking the link takes me to the top of the page. I just want the divs below to show or hide...
Can I use "button" or "div" instead of "a"? If so, what would I use instead of "rel"?
Sorry for the noob question. I just can't seem to make any of the solutions I've found here work for my site. What's the simplest way to do this?
Here's some HTML that definitely works with the jquery script above:
$('a').on('click', function() {
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
However if my href="", clicking that link bounces me up to the top of my page for some reason. So I'd rather use a clickable div or a button rather than a hotlink. In which case, what can I use in the script instead of "rel"?

It seems you only need to prevent the default behaviour by adding e.preventDefault();
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>

You can use below values on your href.
Anchor
Here is the complete explanation for javascript:void(0)
The JavaScript void operator evaluates the given expression and then
returns a value of undefined. https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm

Try using href="javascript:" or href="#" instead of leaving the attribute empty. href="" tells the browser to reload the current page that you are in, which is why it bounces you to the top of the page.
You can also use <button> or <div>, the effect will not be very different from using <a>. You can also use rel if you are using <button> or <div>. In fact, it is arguably better to use rel on <button> and <div> because the attribute does not have any functional purpose in those tags. On the contrary, <a> uses the rel attribute to specify a few things to browsers.

Target attribute does not suitable for divs it is only for windows or iframes. Also, hyperlink should has href attribute otherwise it will be an anchor or placeholder link in HTML5 specifications.
You may use any conjugation attributes between the link and its div such as link title will be div id.
Example:
Show DIV 1
Show DIV 2
Show DIV 3
<div id="div1" class="linked-div" style="display: none"> One</div>
<div id="div2" class="linked-div" style="display: none"> Two</div>
<div id="div3" class="linked-div" style="display: none"> Three</div>
<script>
$("a").click(function(){
divId = $(this).attr("title");
$(".linked-div").each(function(){
if ($(this) == $("#"+divId)){
$(this).show()
}
else{
$(this).hide()
}
})
$("#"+divId).show();
})
</script>
DEMO

A pure CSS text link to video slider

I'm trying to build a pure css text link to video slider, within our Umbraco CMS.
I have very little movement on code I write as TinyMCE WYSIWYG will strip the majority of code out.
What I have done is created a base CSS slider and tried many click actions and the only one that seems to work is a standard HREF. So for example:
<!-- YouTube video - there's a few of these 'item*' -->
<div class="item slide-in" id="item0"> <iframe src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen="" width="410" height="231" frameborder="0"></iframe>
</div>
<!-- End YouTube video -->
<!-- The link to call the video 'item*' -->
Cat link one <br> <br> Cat link two
<!-- end link video 'item*' -->
The problem is that it has no option, but to work as a page anchor - which is really annoying me.
I'm not able to update anything else except the CMS interface. I've have capabilities to add JS in the head or footer of the document.
Visit the jsfiddle example
I can only add an onClick to an <a href... onclick=...>, but that still creates an on page anchor..
Any thoughts would be very much appriciated?

Switching an <iframe>'s src by an <a>nchor without any JavaScript is possible. Do the following:
Assign a name to <iframe>
Assign a target to <a> that value is name of <iframe>
Assign a href to <a> that value is the url of any valid youtube video.
Included suffix the url with autoplay=1 if you want video to launch once the button is clicked.
Styled the link to blend into a button, since anchors irritate you?
For some reason the videos aren't working in snippet, so for a live functioning example go to this PLUNKER
Demo
a {
text-decoration: none;
font-size:20px;
}
<button><a href="https://www.youtube.com/embed/RUlbTCjnX6E?ecver=1" target='yt'>1 Minute</a></button>
<button><a href="https://www.youtube.com/embed/1Wh8RzcQZr4?ecver=1" target='yt'>Cat Fails</a></button><br/>
<iframe name='yt' src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen width="410" height="231" frameborder="0"></iframe>

Want to place a button to close the iFrame, but button click is not working

In my meteor based application i am using an I frame to show some contents to the user. It is working properly. But i want to place a close button which unloads the Iframe from the template when clicked.
I tried it as in the code given below by placing a button, but I am unable to get click event on it. means button click is not working. I am working with iframes for the first time.
Is this the right way to unload an iframe?
If not then how can i unload it, or what is the best way to unload an Iframe?
<template name="preview">
<div style='display:none'>
<div id='preview' style='padding:10px; background:#fff;'>
<button id="close_content_file">Close</button>
<iframe frameborder="1" src="{{preview_url}}" align="left" width="100%" height="500px" >
</iframe>
</div>
</div>
Template.preview.events({
'click #close_content_file':function(){
console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
},
});
I placed a <button></button> in the div to close or unload the Iframe. but click is not working on that button.If I place the button in the div which is hidden. The button is working there. Iframe is opening on the complete screen. means it over lays the omplete screen as bootstrap modal dialogbox.can i place a button in the Iframe itself? . help will be appreciable

There is an issue with the binding of event with the button. Use this way.
$("#close_content_file").bind("click", function() {
//console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
});

I don't know which JS lib you are using, and also I'm a little confused about the
<div style='display:none'>
but I make a little modification so it works fine with jQuery ,
here is the link http://jsfiddle.net/QHxac/

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.