I need to show loader before the page is opened. If I remove data-ajax="false" is works. But I need to have data-ajax attribute.
<a href="..." data-ajax="false" class="show-page-loading-msg">
Home
</a>
Use $.mobile.loading()
Demo
$.mobile.loading("show");
And
$.mobile.loading("hide");
Related
The bootstrap collapsing navbar links adds "http://" to my link path and it makes the link not work in several browsers. (sit is on surge.sh)
Ok, I'm using react-bootstrap and react-router on my site.
I am deploying to surge.sh for testing purposes.
If I put a normal react-router link like this on the page:
<Link to="/contact" className="link">Contact</Link>
, the link works fine. I check the URL at the top of Safari and it reads:
binginlay.surge.sh
In my bootstrap navbar code I have links like this for he dropdown:
<Navbar collapseOnSelect expand="xl" bg="{background-color}" variant="dark" id="mobile">
<Navbar.Toggle aria-controls="responsive-navbar-nav" id="menuButtonIcon" />
<div id="mobileTitle">
<div>Bingham Inlay Arts</div>
</div>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="dropdownLinks">
<Nav.Link href="/" id="galleryLink">Gallery</Nav.Link>
<Nav.Link href="/custom" id="customLink">Custom</Nav.Link>
<Nav.Link href="/videos" id="videosLink">Videos</Nav.Link>
<Nav.Link href="/techniques" id="tecniquesLink">Tecniques</Nav.Link>
<Nav.Link href="/bio" id="bioLink">Biography</Nav.Link>
<Nav.Link href="/contact" id="contactLink">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
The navbar hamburger icon shows up. When clicked, the dropdown menu appears. All the links are shown. Clicking a link give a surge.sh error 'Page not found'.
I check the URL at the top of Safari and it reads:
http://binginlay.surge.sh
The only difference between the link working and not is having the 'http://" added in front of the href link I provided.
How do I get bootstrap to not put 'http://' in front of my links?
Or, is there a workaround anyone can think of?
Thanks in advance
I'm trying to find a link in my navbar, nested like so:
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
I've tried using the following methods and none of them have worked:
find_link("via Twitter")
find_link("via Twitter", {href: "/users/auth/twitter?state=navbar_basic"})
find('div', {class: 'option'})
Not really sure how to grab that element... The main goal is to test the link via click_link.
Edit:
Here's the full HTML structure:
<body>
<div class="top-bar" id="top-bar">
<nav>
<--- other nav elements not listed --->
<div class="navigation-butt desktop" id="navigation-butt">
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
</div>
</nav>
</div>
</body>
I'm guessing the menu is collapsed and you haven't done anything to open it, so the link isn't actually visible on the page. Assuming you just need to click on the '#loggedoutmenu' item to open the menu you could do something like
find('#loggedoutmenu').click.click_link('via Twitter')
which will click on 'loggedoutmenu' then look for the link inside it, and click the link when found. If clicking on '#loggedoutmenu' isn't how you open the menu then you'll need to provide more info.
Update: You have now indicated that the menu opens on hover - so assuming the user has to hover over an ancestor of the button you want to click you can do
find('<css selector for the visible element the user needs to hover over>').hover.click_link('via Twitter')
Writing my solution as an extension of Thomas Walpole's, which lead me to getting it. Thanks again, Thomas!
find('#navigation-butt').hover.click_link(href:"/users/auth/twitter?state=navbar_basic")
Edit: Updated my answer since the previous explanation was incorrect.
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});
I am using jQuery Mobile and CodeIgniter. In my index page,
http://localhost:8888/hwezemail2/index.php/welcome/student/index
I have a link to another page.
http://localhost:8888/hwezemail2/index.php/welcome/student/myhomework/56
But when I click the link, it will go to the following and does not display.
http://localhost:8888/hwezemail2/index.php/welcome/student/index#/hwezemail2/
index.php/welcome/student/myhomework/56
Then I refresh the page once the url becomes
http://localhost:8888/hwezemail2/index.php/welcome/student/myhomework/56
But it does not display the content. So I refresh it again then it shows the content.
Once it shows, then I don't have any problem. It is only the first time.
My PHP code it the following.
echo '<a href="'. base_url().'index.php/welcome/student/myhomework/'
.$userid.'" data-role="button" data-inline="true" data-transition="pop"
data-icon="star" data-mini="true" data-theme="c">Missed Homework</a>';
I added data-ajax="false" to the link and the problem was solved.