I am trying to have a fancy box appear onload, it's working so far but it's not loading the greyed out background. AT the moment I have a hidden div and then I call it, so the div is appearing but not the other fancybox features.
Does anyone have any idea?
<div id="warning">
<h3>Please use Internet Explorer</h3>
</div>
<!-- FancyBox for browser warning-->
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#warning");
});
</script>
So it's like this:
I want it like this:
Related
I want to hide the div till page load the i want show that div after the page is completely loaded, for that in my phtml file i tried this.
<div id='pilot' style="display : none">
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e6b0d049e042d5f" data- businessunit-id="54c2a000ff00057c" data-style-height="28px" data-style-width="100%" data-theme="light">
Trustpilot
</div>
</div>
<script>
$(document).ready(function() {
$("#pilot").show();
});
</script>
But its not working, any help can be appreciated.
If your jQuery library is loaded in to the DOM and you can't see any errors on the console, then this code should work for 100% sure.
If this is your content all on the page, that will be rendered during milliseconds, so your jQuery code will be executed in no time. Make delayed showing the DIV, and in that case will seem like loaded after the page rendered.
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
Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
I have a link like this
COME HERE
I want to open the popup.html file as a jquery popup. And I cant have it inside the current page as a <div> with an id. I must have it out side the current file.
And I cant use dialog's as it reloads the current page. Any idea on how to do it?
Inside the popup.html I am using just a single header.
Or any methods through which I can avoid the page being reloaded when dialog is closed?
Use .load() to load popup.html into a placeholder (i.e <div id="PopupPH">). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
Moreover, in popup.html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
jQuery Mobile 1.4
Insert placeholder inside body tag or data-role="page" and load popup.html.
<body>
<div data-role="page">
</div>
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</body>
Or
<body>
<div data-role="page">
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</div>
</body>
Load popup.html into placeholder
$("#PopupPH").load("popup.html");
Inside popup.html popup div, add JS to create, open and remove popup once it's closed.
<div data-role="popup">
<!-- contents -->
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</div>
jQuery Mobile 1.3 and below
Do the same as above, except for popup placeholder should be inside data-role="page", because jQM 1.3 doesn't support external popup. Also, replace .enhanceWithin() with .trigger("create").
Using the frames & popups in jQuery mobile, you can simply include an iframe inside, although dialogs are still probably your better bet. (Especially as a click outside the popup.. kills it)
<div class="hidden">
<div data-role="popup" id="externalpage">
<iframe src="http://www.bbc.com"
width="480"
height="320"
seamless>
</iframe>
</div>
</div>
<a href='#externalpage'
data-rel="popup"
data-role="button">COME HERE</a>
<script>
$(document).on("pageinit", function() {
$( "#externalpage" ).on({
popupbeforeposition: function( event, ui ) {
console.log( event.target );
}
});
});
</script>
Demo: http://jsfiddle.net/tcS8B/
jQuery Mobile Dialogs don't refresh the page I don't think, it simply masks it with a new background for focused attention.
Try
Test
alright so i have some unique problems; first of all, my jquery is not working; i very well might have not put it in the html right so i am going to toss a good deal of code out to see;
basically i need the rollover class image to change to its hover state when the div class is rolled-over (i have a some css which changes the div class display to block) alright so here is the html
<div id="header">
<div class="home" id="home" ><p><img src="images/home-crown.png" class="rollover" width="100px" /></p></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script type="text/javascript" src="js/load-it-up.js"></script>
/so yeah... trying to swap that image stuff out here is jquery
$(document).ready(function(){
$("img.rollover").hover(
function()
{this.src = this.src.replace("images/home-crown.png","images/home-crown-hover.png");},
function()
{this.src = this.src.replace("images/home-crown-hover.png","images/home-crown.png");}
);
});
really frustrated with it because i have tried multiple solutions; any help at all would be appreciated; it is probably something stupid :P
right now i am just trying to get the image to rollover (at least)
i really want the rollover to activate when the div is rolled over (the #home div)
Try this.
$("img.rollover").hover(
function(){
$(this).attr("src","images/home-crown-hover.png");
},
function(){
$(this).attr("src","images/home-crown.png");
}
);