I'm trying to add 3 buttons to the header of a mobile web-app i am making with jQuery.
I am able to make 2 buttons but as soon as i put the 3rd on the header the first dissapears :/
i tried the answer in this question: Adding many buttons to header in JQuery Mobile
however for some reason jquery style's will not apply to div tags inside the header.
my header currently has this code:
<div data-role="header">
<div class="ui-btn-left" data-role="controlgroup" data-type="horizontal">
</div>
<h1 id="usr"></h1>
Profile
</div>
and my webpage looks like this:
Does anybody have any ideas why this is happening?
please excuse any grammar/spelling mistakes: I am dyslexic and may have missed some in proof reading
okay so thanks to #TSV who pointed out i was using "data-roll" not "data-role"
that actually fixed my problem completely :)
Related
I would like to ask you for help with bootstrap scollspy. I implemented first one in my project it is working fine and I am happy.
Problems started when I wanted to add another, different ID, different target. I added it in the same way but I cannot get it to work.
I googled about this but I couldn't find solution or proper informations, I saw some posts that there should be only one scrollspy on "body" I tried to experiment with that knowledge but still nothing.
My code:
<div id="back-button">
Back
</div>
<script>
$('body').scrollspy({ target: '#back-button' });
</script>
<div data-spy="scroll" data-target="#projects" data-offset="0">
CONTENT HERE
</div>
I tried to change order, change IDs to Classes, move scripts around but still nothing. Can you please help me?
Thanks and Cheers
I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.
I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>
You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.
I tried to develop a website which allows user to post status and comment each of the status.
So, each of the status will have a comment group which belongs to the status.
I apply jquery ajax with setinterval which will loop the jquery to retrieve the latest status and display it in my website.
However, when comes to comment. I tried to apply this to each of the comment group but the problem I met is when new status and comment group show in my website. Some of the javascript not triggered.
If my website have 100 status with their own comment groups which mean the website will have 100 setinterval function running. will it be a problem for performance? Is that any better ways to achieve this?
My code is in JsFiddle
http://jsfiddle.net/4mm4buzk/
<div id="Status">
<!-- Call this function for specific status because div no onload event -->
<script>
TriggerGetComment(1)
</script>
<!-- This will be adding in dynamically through ajax-->
<div id="ContainerForEachOfTheStatus">
<div style="display:none">1</div>Status/Message will be here.
<div id="Comment1">
<!-- Container for each of the comment -->
<div>
<div style="display:none">1</div>Comment Here</div>
</div>
</div>
So, the question that I want to ask is
- Is that any other way beside using setInterval to keep request to web server to check the new status or comments ?
- What is common ways that people used to solve such problem?
Sorry for my poor english. Thank you.
I had help with my previous question to be able to create changing navlinks with my navbar with JavaScript. Now I need to make the buttons be created automatically within the same JavaScript. This is what I had, this is what the code creates, with CSS and html output. http://jsfiddle.net/k35wawyg/2/
What Should Happen
What should happen is the buttons appear above each other in the top right, but it seems that it doesn't work. Also, the buttons should be linked with the JavaScript src that would be inside the HTML with
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js">
</div>
What Actually Happens
As you can see in the JSFiddle, they are under the NavBar, across from each other, and clicking it will make it output a console error with:
Uncaught ReferenceError: execFunction() is not defined
Please help. I rewrote the question due to a JSFIDDLE request.
I think you had a number of problems in your fragment. I have modified the code and here is a new jsFiddle that now seems to work. Because there were so many things I changed, I can't list them here but if you compare the new code to your existing code, hopefully it should become clear.
jsFiddle
Probably the biggest change was the way that the functions were invoked:
<a onclick="execFunction2();">
I am facing a problem of dynamically adding a jquery mobile collapsible element. I have the following JSFiddle. There have been lots of questions similar to this one but I am not able to get the hang of it. I hope that someone would help me out as I am new to Jquery and finding it a bit confusing at times.
Link to JSFiddle
<html>
<body>
<div id="collapsiblelist" style="width:400px;height:600px; display:inline- block;float:left">
</div>
</body>
</html>
Javascript code:
var coll=document.getElementById('collapsiblelist');
$(coll).append('<div data-role="collapsible-set" data-theme="b" id="collapsible-set" data-ajax="false"></div>');
$('#collapsible-set').append('<div id="collapsible1" data-role="collapsible" data- collapsed="false" data-ajax="false" data-theme="b"> </div>');
$("#collapsible1").append('<h3>first element</h3>');
$("#collapsible1").append('<p>I am the collapsible set content for section 1.</p>');
$(coll).trigger('create');
The problem is that it appears on JSFiddle but not on my mozilla browser.
I have the same code.
Please inform me if i am missing any javascript files.
Thanks in advance
Don't use more than one jquery.js files. There could be a potential for code clash and elements may not be rendered even if your code is logically correct. Hope that helps anyone out there. Thanx guys