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.
Related
I am building currently my own web application. In the header of this application there is a navigation bar.
I added the same navigation bar to all my html pages, so that it stays seen when navigating between pages and set the nav-element to active to which page I am on now.
My problem is this nav-bar shows every time that it is loading when I am navigating from one page to another.(When i click on a link in it!)
So now I thought if it would be a trick that when I click on a link on my current page, that the current page should be locked/ friezed till the another page has loaded and continue working. And do not see on the page the loading process.
Here's a JS Example!
<div class="scrollmenu" id="myHeader">
<a style="float:left" href="index.html">Menu</a>
<a style="float:left" href="page1.html">Page1</a>
<a style="float:left" href="page2.html">Page2</a>
<a style="float:right" href="#Search">Search</a>
</div>
Is such possible in Javascript? Something like VBA screen updating.
I am thankful for every tip or solution!
Cheers!
The behavior that you're describing is accomplished via single page application (SPA) architecture. With traditionally linked documents, where you're requesting pages from a server, delaying the loading of the requested resource--for the sake of visual continuity--will give the impression of a slower than normal connection. This would more than likely frustrate your users.
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 have a user control which contains a link, when it is clicked I want to open a nav as a popup menu. I'm using jQuery mobile and I've given my nav an id, and the link points to it as required.
This works without any issues on one page, but when I add the control to another page it changes the href attribute on the link to "Controls/#menu" and instead of opening the div, it will try to redirect (and shows the Controls directory).
HTML:
<a id="lnkMenu" runat="server" href="#menu" data-rel="popup" data-icon="grid"
data-iconpos="right" data-transition="pop" data-position-to="window">Menu</a>
<nav id="menu" data-role="popup" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" data-count-theme="b">
<!-- Some <li>s with menu options -->
</ul>
</nav>
When I load the page:
<a data-position-to="window" data-transition="pop" data-iconpos="right"
data-icon="grid" data-rel="popup" id="ctl00_Banner2_mobileProfileMenu_lnkMenu"
href="Controls/#menu" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all
ui-btn-icon-right ui-btn-up-c" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span" data-theme="c" aria-haspopup="true"
aria-owns="Controls/#menu">
<span class="ui-btn-inner">
<span class="ui-btn-text">Menu</span>
<span class="ui-icon ui-icon-grid ui-icon-shadow"> </span>
</span>
</a>
I am using:
jQuery 1.10.2
jQuery UI 1.10.3
jQuery Mobile 1.3.1
As far as I can tell, there's no custom javascript that's modifying the control, and I have got this working in one place, it's just breaking elsewhere. The only difference between the 2 pages is that where it works I am not using jQuery UI. If I manually edit the page (using firebug or chrome dev tools for example) to fix the href, it works as expected.
In case it's relevant, the user control is being used in a page in another directory, with a master page in the site's root directory. All the javascript is loaded on the master page.
EDIT: I tried removing jQuery UI from the problem page and the issue persists.
After removing some custom javascript AND removing jQuery UI I was able to get the popup working (the custom javascript was using jQuery UI). The href still seems to add the path to the link, but it's working, so I guess that's a win.
If anyone else ends up having this problem, try removing jQuery UI. I have a feeling it doesn't play nice with jQuery Mobile.
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>
I have created a web page using JQuery Mobile that has a link at the bottom of the page that goes to the home page of our "full" site. The mobile page is in the same domain as the home page. When the link is clicked, the browser just hangs and does not render the home page. I am guessing this has something to do with the way in which JQuery handles links within the same domain... any ideas?
For example, my mobile page is at "http://somedomain/m/index.php". On this page, it links to "http://somedomain/index.php" like this:
View full site
Should I be handling this link differently? If I insert a URL to an outside domain, it works just fine.
Thanks for your help.
Try this <a href="http://somedomain/" data-ajax="false" >View full site</a>
By default,if the link is from the same domain,jqm will try to load it via ajax.Here in this case it should not be loaded via AJAX.
Let me know if that helps.