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>
Related
The situation is: on the website I have tab system implemented with iframes. There is an <ul> that contains <li>'s. Each <li> contains one <iframe>.
Like this:
<ul>
<li>
<iframe></iframe>
</li>
...
</ul>
On one of the pages, a jQuery dialog is opened when certain event happens.
The problem is: if tab (<iframe>) is not activated (parent <li> element has display:none) and jQuery dialog is initiated, then when user returns to this tab, the dialog is located in wrong position. It's top and left attributes is set to 0. It happens in FireFox but not in Chrome.
The only solution I found is to initiate redrawing of dialog when user switches to this page, by calling some universal function inside iframe when it's activated if this function exists on this page. But I think this solution is bad and I hope there is a better way to solve this.
Appreciate any help and sorry for my English.
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 :)
I'm struggling to set up a highslide gallery to work like the one here: http://www.roadrash.no/hs-support/gallery-in-page+caption-above-thumbstrip.html
However, there's a problem that the example on the page above is a popup window that is placed above everything else in a page.
I want to place the gallery inside a page, without any z-indices, absolute positions etc, so that my highslide gallery would look like here: http://www.theinsider.ua/multimedia/543ce96463688/#1
Anyway, right now it seems like there's no way to do this with highslide. Am I mistaken?
This is what's known as an "in-page gallery." See the barebones example:
http://highslide.com/examples/gallery-in-page.html
The example from RoadRash's site is also an in-page gallery. It is not a popup that floats above everything else on the page. Here's an example from RoadRash's site that has three in-page galleries on a page of ordinary HTML. There are no popups, and no modal windows:
http://www.roadrash.no/hs-support/3galleries-in-page.html
A regular Highslide JS popup looks like this:
http://highslide.com/examples/mini-gallery.html
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.
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox