Magnific Popup not loading on specific parts of page - javascript

I'm trying call a popup with a link and using Magnific Popup to achieve the same. The code is working properly on test conditions but during integration to main project, it refuses to open.
The code I'm using to call the popup is as follows
<a class="popup-modal" href="#callflow">Open Open Popup</a>
And it works perfectly while running standalone. I am trying to integrate this with the following dynamic code fragment.
<td id="data_column_new" class="xcol" style="background-color:<?=$colour;?>" width=50>
<a href="javascript:popup('popUpDiv','<?=$dataset['orderid'];?>','<?=$followdate;?>',
'<?=$dataset['sales_status'];?>','<?=$dataset['sremark'];?>','<?=$id;?>','<?=$closuredate;?>');">
<img src="<?=$generalVars['IMAGE_ROOT']?>editIcon.gif" id="<?=$id;?>" />
</a>
<a class="popup-modal" href="#callflow">Open Popup</a>
<a href="javascript:showSalesTransHistory('<?=base64_encode($dataset['orderid']);?>')"
style="color:#003399;text-decoration:none">
<?=$dataset['sales_status'];?>
</a>
But while clicking link this time, it gives nothing but a change in url(adding #callflow as per the link). Strangely, the same link works in other parts of program. What prevents my popup from loading on this specific fragment?

Simply set Z-index to the maximum for your Magnific Popup.
As far as css is concerned it should be z-index issue.
And also please check if your Background is transparent.
Happy Coding :)

Related

Foundation for Apps, off canvas close on click off

I'm using Foundation for Apps, the angular version, and trying to use the off canvas menu. It works fine, opening and closing via setting links, but does not close when clicking off of it in the main content area like previous versions, and their example, do.
It's a really simple setup:
<zf-offcanvas id="menu" position="left">
<a zf-close="" class="close-button">×</a>
</zf-offcanvas>
<a zf-open="menu" class="button">Open Off-canvas</a>
And it should be done, but clicking anywhere on the main content (not the links) does not close the off canvas like their example docs:
http://foundation.zurb.com/apps/docs/#!/off-canvas
I'm looking for either a solution to this problem, or even a hacked out JS solution to close the window on clicking on "main" content.
You have to add the "zf-close-all" attribute to the body tag.
<body zf-close-all>

How to hyperlink text to an external website on Wordpress Fancybox images

I am trying to link these fancy box images to a website externally.
For example: http://www.dramaticsnyc.com/stylistsandlocations/
Click on one of the stylists and the image pops up. On the bottom it says click here to read and write reviews. When you click on it, it doesnt go to the page, it gets stuck on the same page. How can I make it link to the site on the hyper link? Any help would be appreciated. Thanks.
Here is the code I am currently using for each picture (put this code in fancygallery caption):
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.reviewmenyc.com">Click here to write and read reviews! Review Me NYC</a>
</div>
</div>
It only links to the site internally not externally. If you click on the link, its supposed to go to www.reviewmenyc.com but its staying under www.dramaticsnyc.com. What do I have to do the change this? I am not the greatest but I can learn and I know my way around.
<a class="’fancyframe’" href="’http://www.reviewmenyc.com’">Click here to write and read reviews! Review Me NYC</a>
Should be:
<a class="fancyframe" href="http://www.reviewmenyc.com">Click here to write and read reviews! Review Me NYC</a>
There is no need for the extra ' in the class and the href
Also, instead of changing the page location, you might want to just open a new tab. If so, use this:
<a target="_blank" class="fancyframe" href="http://www.reviewmenyc.com">Click here to write and read reviews! Review Me NYC</a>

JQuery Mobile Full Site Redirect

I'm trying to do something quite simple for a mobile site: adding a full site redirection button. My mobile site is stored in an m directory, root /m, while my redirect link goes to the directory root/index.php.
The actual button is:
<a data-role="button" data-theme="a" href="http://www.mysite.com?m=desktop" data-icon="home" data-iconpos="left">
Full Site
</a>
However, the problem is that when that link is pressed, JQuery Mobile reformats everything on the index.php page and adds things like
<html class="ui-mobile">.
I can't seem to find anyone else having any issues with this for some reason.
Anyone know how to disable this for some links and enable it for others?
Thanks.
Add rel="external" attribute into your button like this:
<a data-role="button" data-theme="a" href="http://www.mysite.com?m=desktop" data-icon="home" data-iconpos="left" rel="external">
Full Site
</a>
This will force open new url without loading it into current DOM structure.

Jquery mobile - Icons disappear on rel="external"

I've been encountering some problems with icon appearance
on my project, I have a multi-page html which i can only go with the attribute rel="external" (only way move to a multi-page html).
The problem is that whenever I click the link with the rel="external", the page loads without the icon pictures, instead, there are some empty circles which supposed to contain the icons.
this problem continues to occur throughout the other pages which shown after that rel="external" link.
Note that before i click the rel="external" link, the icons work perfectly fine..
What can i do?
The usage of rel="external" causes a full page refresh, so the target HTML page should include in its header tag all the JS and CSS required for proper appearance and functioning.
Could you check whether the jQM JS and CSS files are included in the target HTML files?
I hope this helps.

How can I get a link to be recognized by a search engine while being created in javascript?

I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a URL which the user will be sent to if he/she clicks on the popped out image.
Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.
Anyone have any idea on how I can get this link to look good, and be visible by search engines?
Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).
Some examples of code that Googlebot can now execute include:
<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')">new page
open new window
Put the link right around your thumbnail:
<img src="thumb.jpg" />
Bind your expand function to the link and cancel the default behavior in your javascript:
$("a.thumb").click(function(e)
{
// show the larger version
e.preventDefault();
});
You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.
use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.
<a href="link-to-page1.html" class="thumb-link">
<img src="thumbnail1.png" alt="thumb 1" />
</a>
<a href="link-to-page2.html" class="thumb-link">
<img src="thumbnail2.png" alt="thumb 2" />
</a>
<a href="link-to-page3.html" class="thumb-link">
<img src="thumbnail3.png" alt="thumb 3" />
</a>
then in your javascript:
$(document).ready(function(){
$(".thumb-link").click(function(event){
event.preventDefault(); // cancel the hyperlink default action
// do your javascript here
});
});

Categories