popup onload not displaying - javascript

I want a popup that only appear when onload. I'm using the magnific popup
the script is working but it display an error on the popup saying that "The image could not be loaded." not sure what is the best 'type' I need to use with the one im' using.
HTML:
<div id="pop">
<img src="something.jpg">
</div>
SCRIPT:
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {src: '#pop'},type: 'image'}, 0);
});
CSS:
#pop {display:none;}

You are calling magnifyPopup.open() on the <div>, not the <img />. Try calling it directly on the image.
<div id="pop">
<img src="something.jpg" id="img" />
</div>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {
src: '#img'
},
type: 'image'
});
});
</script>

This is how you should use the magnificPopup library:
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {
src: '#pop',
type: 'inline',
},
type: 'image'
}, 0);
});
#pop {display:none;}
.mfp-content #pop {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<div id="pop">
<img src="http://www.w3schools.com/images/colorpicker.png">
</div>
Several changes:
If you use an element which is not an image as an item you should specify the type: inline
The display: hidden is still applied to the element event inside the magnificPopup, so I added a display: block for that element when it's inside the magnificPopup wrapper.
Another options is to use the image that is inside the #pop element:
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {
src: $('#pop img').attr('src')
},
type: 'image'
}, 0);
});
#pop {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<div id="pop">
<img src="http://www.w3schools.com/images/colorpicker.png">
</div>

Related

When using html2pdf.js library to render a PDF , iframe elements aren't rendered?

I am trying to use the html2pdf.js library to render a section of my html to a pdf which I can download. I have it all mostly working except for that any iframe elements I have on my page are not rendered to the pdf and are just not existent? Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[CSS/JS Files - Start]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" ></script>
<script type="text/javascript">
$(document).ready(function($)
{
$(document).on('click', '.btn_print', function(event)
{
event.preventDefault();
//credit : https://ekoopmans.github.io/html2pdf.js
var element = document.getElementById('container_content');
//easy
//html2pdf().from(element).save();
//custom file name
//html2pdf().set({filename: 'code_with_mark_'+js.AutoCode()+'.pdf'}).from(element).save();
//more custom settings
var opt =
{
margin: 1,
filename: 'pageContent_'+js.AutoCode()+'.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
});
});
</script>
<style>
#container_content{
margin:auto;
width: 50%;
border: 2px solid lightgray;
box-shadow: 2.5px 10px lightgray;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-center" style="padding:20px;">
<input type="button" id="rep" value="Print" class="btn btn-info btn_print">
</div>
<div class="container_content" id="container_content">
//iframe src tag shortened for brevity
<h1>PTS Usage</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
<h1>Top Subscriber</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
</div>
</body>
</html>
So everything except the iframe elements within my are rendered to the pdf that downloads on the click of the button. Is there a way to fix this with html2pdf or should I use a different JavaScript library?

ImgAreaSelect in jquery

I am new in jquery. my task in jquery is "ImgAreaSelect"
I am trying this from morning but not achive the goal. please review my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>
You seem to be missing the plugin itself that you have to download from http://odyniec.net/projects/imgareaselect/
jQuery is just the Core and does not include an image area select method
After loading the plugin you will be able to use $('#ladybug_ant').imgAreaSelect({ .. });
This is an example http://jsfiddle.net/8TwRJ/
I also face this problem.I made some changes in Css and Bingo,It is resolved.
Actully the parent div position should be relative to make imagearea scrollable.
You has to define the "parent:"imgParentDivID"" and set position:relative of that div.
It will work perfectly.
Code:
<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select- plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>
$("#imgID").imgAreaSelect({
parent: "#imgParentDivID",
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
selectionOpacity: 1,
onSelectChange: preview
});
I hope this will help you.
you have used script tag for the css link. Use "link" tag instead of "script" tag also i.e use
<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>
instead of
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
this will solve the issue without any further changes.

Really Simple Slideshow open link in new window

I am using the Really Simple slideshow and nowhere in the page does it have a way to click on a slideshow to open in a new window or tab (target="_blank") to certain links.
I have the following, but it still opens in the same page:
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
EDIT
I have tried the following code as suggested by Jigar Savla and yurtdweller but it keeps opening in the same page. I had tried in Chrome and IE.
<html>
<head>
<link rel="stylesheet" href="http://reallysimpleworks.com/slideshow/demo/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://reallysimpleworks.com/slideshow/demo/js/jquery.rs.slideshow.js?v1.4.10"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
controls: {
playPause: {auto: false},
previousSlide: {auto: false},
nextSlide: {auto: false},
index: {auto: false}
},
slide_data_selectors: {
caption: {selector: 'div.caption', attr: false}
},
effect: 'slideLeft',
interval: 4,
transition: 500
};
$('.rs-slideshow').rsfSlideshow(opts);
$('a.open_in_new_window').attr('target', '_blank');
});
</script>
</head>
<body>
<div class="main">
<section class="demo-section clearfix" id="demo-1">
<div id="slideshow-capts-links" class="rs-slideshow">
<div class="slide-container" style="">
<img src="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" class="rsf-slideshow-image" style="left: 0px; top: 0px; ">
<div class="slide-caption">This is a caption for the first slide.</div>
</div>
<ol class="slides">
<li>
<a href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-a.png" ></a>
</li>
<li>
<a class="open_in_new_window" href="http://reallysimpleworks.com/slideshow/demo/images/morzine-2011-b.png" data-link-to="http://reallysimpleworks.com"></a>
<div class="caption">
<p>This slide has the hyperlink</p>
</div>
</li>
<li>
</li>
</ol>
</section>
</div>
</body>
</html>
Edit after answer
OK, I got it!
Thanks to Jigar Savla's code sample, I just added a couple new lines in the Javascript:
// Under if (slide.link_to) ...
if (slide.link_to_new_page) {
$img = $('').append($img);
}
// Under link_to: {selector: 'a', attr: 'data-link-to'}, ...
link_to_new_page: {selector: 'a', attr: 'data-link-to-new-page'},
And in the html changeddata-link-to=http://google.com to data-link-to-new-page=http://google.com
Now if I just want to use the link and have it open in the same page I use data-link-to, otherwise data-link-to-new-page.
Worked great!!
THANKS!
Well i would have asked you to add a separate class for each anchor tag that you need to have a link to open in new window.
say for example if you have used open_in_new_window as class name to open links in new window than the code would become:
$('a.open_in_new_window').attr('target', '_blank');
hope this helps ;)
You can add
$('a').click(function() {
$(this).attr('target', '_blank');
});
after
$('.rs-slideshow').rsfSlideshow(opts);
this will make all the links on the page open in a new window. If you had classes on the links, we can change the code to target those specific classes and open only the ones you want to select.
Because Really Simple Slideshow generates the HTML for each slide on the fly, just before the transition happens, you’ll need to target the links after they’re generated. You can do this by attaching to the rsPostTransition event:
$('#my-slideshow').bind('rsPostTransition', function() {
$('#my-slideshow a.open_in_new_window').attr('target', '_blank');
});
Or you could use jQuery’s delegated events, which is probably the neater option:
$('#my-slideshow').on('click', 'a.open_in_new_window', function() {
$(this).attr('target', '_blank');
});

How to change image to text using jquery's .hover event

I need a simple script that allows me to change the inner html of a p tag which in my case is an image to just plain text when I hover over it.
Example:
<div id="one">
<p><img src="events.png" alt="" /></p>
</div>
When i hover over the above p tag i want it to change to the text as seen below
<div id="one">
<p>Events</p>
</div>
You don't need to use javascript at all for this. This is handled very simply using css.
<div id="one">
<p>
<span>Events</span>
<img src="events.png" alt="" />
</p>
</div>
CSS:
#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }
Here's a fiddle of it in action: http://jsfiddle.net/CKpCk/
Try the following:
var html = $('#one p').html()
$('#one').hover(function(){
$('p', this).html('Events');
}, function() {
$('p', this).html(html);
})​
Demo
Try this one:
<html>
<head>
<title>Try</title>
</head>
<script type="application/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testHover").hover(function()
{
$("#testHover").html("Events");
});
});
</script>
<body>
<div id="one">
<p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
</div>
</body>
</html>

bxSlider within show/hide divs

My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden;
I`m use last solve
Another solution would be to allow bxslider to load, then hide it once it has.
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>

Categories

Resources