I'm having trouble figuring out where I am going wrong with my JQuery Mobile site. I have a link to another JQuery Mobile page that uses a querystring. The link looks like this.
<li>News</li>
All normal internal JQuery Mobile links do not produce the problem. Only links that go to another JQuery Mobile page with a querystring produce this problem. The problem is when the above link is clicked my dom goes from looking like this.
To looking like this.
Images are hard to see on SO, so here they are on imgur.
http://imgur.com/a/2Z1Ss
These are firebug DOM views of what the initial page and second page looks like. My question is why are there now two DOM element with the same exact ID? This is, and correct me if I'm somehow wrong, not a valid HTML page once this link has been clicked. If I am using querystrings in JQuery Mobile, then what best practice am I missing that is causing this problem?
What do I need to do to avoid the multiple ID's on the same page as they are causing problems with my javascript functions. I'm baffled by this problem, but hopefully some JQM pro can explain to me what I'm doing wrong. I'm sure it's something silly.
As I thought I was doing something silly. My index.php had a page with id="frontpage" along with my section.php had a page with id="frontpage". I just gave the section.php page a new id and the page is now valid and my functions work properly.
Related
I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';
I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
Please have a look at http://500px.com/photo/3977429?from=popular. Down in the right corner, theres a sharing box. It looks pretty similar to sharethis. But, afaik, sharethis doesnt have embed or submit for example, and im looking for those options. Does anyone know which plugin is used here? Thanks
On the page you linked to, they didn't use anything like sharethis or addthis - they rolled their own. Looking at the code, its clear that they went to facebook, got the facebook like button, embedded it - then wen to google, got the google plus button, etc... and made a grid of them.
You can stylize the sharethis buttons with css to pretty much any extent,
or you can add a grid like that of your own.
The available alternatives to sharethis.com are :
addthis.com
addtoany.com
socialmarker.com
I'm sure there a a lot more out there, but those seem to be the most popular.
If you want something custom like they have and want access to the buttons
here are some sets of images you may be able to use:
http://speckyboy.com/2009/01/26/30-amazingly-creative-social-bookmarks-icon-sets/
Inspecting the source leads me to believe that it is custom work. The images, links and such are placed in the HTML serverside. Only the stumbleupon is pulled from stumbleupon itself. But also not trough some third party service like sharethis.
I have made a basic tabbar view app in xcode but I need it to be a webapp as I will be viewing the data from a server so do not need/ want it on the app store.
I've looked at some other questions with this kind of topic and nothing is relevant. Also I've done plenty of googling and looking into other code plus using things like cubiq.org's slide-in menu.
I really want that tabbar look. I've tried to do this in HTML with images as buttons and using frames but (I think) because I'm using the JS code to stop the UIview from moving (to look more native) it seems that the buttons open the link in a new page, or switch to Safari, rather then open them in the same frame as they would in a regular browser.
Alternatively, does anyone know of a way I can implement a taskbar in a webapp?
Regards,
Eric.
Have you seen JQuery Mobile !?
It's awesome... but still in Beta.
They have precisely the toolbar you're looking for: JQuery Mobile Navbar
Without code, it's hard to pinpoint your problem exactly, but you should not be doing:
Text of Button
Because the above code will actually load a different page. Rather, you want:
<div class="some_button_type" onclick="doSomeAction()"><!-- ... --></div>
And that "doSomeAction()" function should use DOM manipulation to transform the current page to look like whatever you want it to look like (rather than navigating to some separate page).
P.S. I'm assuming you have some CSS styling based on class type, and you might want content in the DIV (for example, for the text of the button). I've also omitted some attributes (e.g. "role") that you want.
I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.
A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.
You can do that with jQuery like this:
$('#element-around-table').load(document.location.href + ' #table-id');
However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).
When I inspect the page using Firebug, I see the form, but it and its elements grayed out.
Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.
I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?
That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.
Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.
I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.