I am trying to add an event to a jquery mobile footer. The source is like this below:
<div data-role="footer" id="footer">
<h2>footer</h2>
</div>
So, when I touch the footer area on the phone,
I want to show a website link.
How can this be done? I searched on google as usual but it didn't show what I needed. Thanks.
You just need to attach a on click event listener to the footer div and then toggle the link display when the footer div has been clicked
<div data-role="footer" id="footer">
<h2>footer</h2>
Some Link
</div>
<script>
$('#footer').click(function(){
$('#link').show();
});
</script>
JSFiddle: https://jsfiddle.net/na04dhet/
Related
I would like to get a lightbox modal box to pop up automatically on page load.
My current anchor works perfect when I actually click it, and here is my bit of JQuery that I've been using so far.
<script>
$(document).ready(function(){
document.getElementById('popup').click();
});
</script>
And the HTML
<a id="popup" class="wb-lbx lbx-modal" href="#alert">test</a>
<section id="alert" class="mfp-hide modal-dialog modal-content overlay-def">
<div class="alert alert-info">
<h2 class="h4">header</h2>
<p>content</p>
</div>
</section>
Problem is, it just brings me to the #popup anchor location on the page, not actually triggering the lightbox that pops if you were to actually click it.
How do I trigger the click event on page load?
Thanks
So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!
I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>
just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily
My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.
I'm having some trouble with the JQuery Mobile collapsible content (http://jquerymobile.com/demos/1.2.0-rc.2/docs/content/content-collapsible.html)
This HTML:
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<div id="address_container">
Some hidden content here
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<div id="descriptions_container">
Some more hidden content here
</div>
</div>
Should be appearing like so:
Is looking like this:
In the broken example the buttons do not expand to show the hidden content. The html on the page is as in the example on the jquery mobile site. When the page loads it is initially fine, however in a moment the page flashes, and then displays incorrectly as above. What's worse is that it's not consistent. Sometimes it works and others it doesn't.
The HTML on the broken version shows that it's inserting an entire hidden content container inside the div that contains the hidden content. Here it is after load:
Any advice or ideas about what causes this and how it can be addressed would be greatly appreciated.
Edit:
Well I've stopped it happening. I had some debug text being Response.Written to the page outside of the HTML elements at the very beginning of the page and stopping this seems to have stopped the above issue occurring. I suppose JQuery Mobile must be throwing its toys out of the pram in an unusual way because of it.
As the example on jquerymobile.com shows, try using paragraph instead of div for the content. Your code would be
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<p id="address_container">
Some hidden content here
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<p id="descriptions_container">
Some more hidden content here
</p>
</div>