I'm trying to make my website check the screen resolution and replace installed font icons (using #webfont) with plain text links, so that the site is more mobile friendly. Im using Opera Mobile Emulator to check if it works. the user interface I am using clearly comes back with a res of 480x320 (in the very top left of the page), yet the .innerHTML javascript isn't firing off. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
<meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
<meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" />
<meta name="author" content="Internet Solutions of Florida" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
{document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
<div class="menu">
<ul>
<li><a id="homelink" href="index.html" title="home"></a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu"></a></li>
<li><a id="piclink" href="images.html" title="picture gallery"></a></li>
<li><a id="directionslink" href="directions.html" title="directions"></a></li>
<li><a id="contactlink" href="contact.html" title="contact us"></a></li>
</ul>
</div>
</div>
That javascript is executing before the HTML is being loaded. So there is no element with the id of "homelink" when the javascript fires.
Additionally, by using document.write, you're effectively overwriting your original HTML, so the tag will never load anyway.
Get rid of the document.write call and place the script just before your closing body tag and it should work as intended.
document.write() is not needed. If you want to diagnose you may use document.title or create a div and divid.innerHTML
Make sure your testing on a <700 area
Add a DOM ready fire.
Place this at the end of the
Things should work then :)
Related
The problem can be seen on the website I am developing https://manu354.github.io/portfolio/
The links in the header cannot be clicked. After a quick search on SO I realized this was because my div was positioned absolute. I had positioned it absolute, so it didn't take up any space in my page layout. To fix this, multiple answers said to add a z-index : 10; to my div. This let me click the links (Pointer / hover functionality worked) and completely fixed the problems for my external links to Facebook, or Twitter. However my internal functional links e.g href="#welcome"were clickable, however they didn't move to the area they were meant to (works if the div is positioned relatively).
For example (the actual codes much longer, and uses revolution slider)
<div style="position:absolute; z-index:1;">
<a href="#welcome" target="_self" style="z-index: 10;>
</div>
Anybody know a fix for this?
Thanks
The problem may be that you didn't put the ending double quotes in the a(anchor) tag the below code can help:
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div style="position:absolute; z-index:1;">
Hello world
</div>
</body>
</html>
Well it doesnt work because your links to an id "welcome" but the div's id is "welcome_forcefullwidth".
Welcome ID
If you remove "_forcefullwidth" or add on your href "_forcefullwidth" it will work
Not to mention that the rest of the IDs are nowhere to be found
I see on your website a lot of inline style and the website is too complex as it should. The code is not that clean.
I am devloping a phonegap app, I used a multi page template like page1.html, page2.html. Each page hits the server and renders the output and show it in a listview. So the problem is if I hit to redirect from one page to another page means it shows white screen.
And also I tried lot of possible ways when I did the google search. But it not helps for me.
My code is given below:
$('#content').append('<div class="wholediv"><span class = "wholediv_content"><a style="text-decoration:none!important;"href="'+v.pagename+'.html?id='+v.nodeId +'&catname='+ v.pagecat +'" data-ajax="false">'+'<img src="http://www.examole.com/'+image+' " class="eventsimages" alt = "image"/>'+'<br /><p>'+v.pagename+'</p></a></span></div>');
index.html:
<div data-role="page">
<div data-theme="a" data-role="header" data-position="fixed" data-tap-toggle = "false" style="height:45px;">
<h3 id = "title">
Moble
</h3>
<span class="off new_off" id = "off" >Off</span>
</div>
<div data-role="content" id="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
I need to avoid the flickering. Please I did lot of search and applied all those answers it did not help me. If I use data-transition means I need to remove data-ajax="false". What to do?
Double flickering or Double flashing is a well known issue.
The solution posted by Rob is actually what works.
Setting in your mail css file:
.ui-page {
-webkit-backface-visibility: hidden;
}
Use this in your viewport tag aswell:
user-scalable=no
I made a basic template for phonegap. With Jquery mobile and so forth.
http://www.codemonkey.mobi/guides/base.zip
I dont see any whitescreens with my base.
Let us know if this worked for you.
Also try this:
http://blog.hackedexistence.com/phonegap-jquery-mobile-white-screen-flicker-solved
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>
I would like create a tabbed mobile page using jQuery Mobile. I have got the basics of creating tabs (For Example Tab1, Tab2, Tab3, Tab4) and having each tab load a new page of content. How would I go about using an anchor within a specific tab? So for example if someone wanted to bookmark a link that took them right to Tab4 Anchor1.
I am pretty new to JavaScript and jQuery.
Code below:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<!-- JavaScript HTML requirements -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="home" data-id="nav">
<header data-role="header" >
<h1>TEST</h1>
<div data-role="navbar" data-id="nav">
<ul>
<li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li>
<li>Speakers</li>
<li>News</li>
</ul>
</div>
</header>
<section data-role="content"> Home </section>
<footer data-role="footer" class="ui-bar"> Buy Tickets </footer>
</div>
<div data-role="page" data-theme="d" id="speakers">
<header data-role="header" data-id="nav" >
<h1>TEST</h1>
<div data-role="navbar" >
<ul>
<li>Home</li>
<li><a href="#speakers" data-icon="star" data-theme="d"
class="ui-btn-active ui-state-persist">Speakers</a></li>
<li>News</li>
</ul>
</div>
</header>
<section data-role="content">The name attribute specifies the name of an anchor.
The name attribute is used to create a bookmark inside an HTML document.
Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section>
<footer data-role="footer" class="ui-bar"> Buy Tickets </footer>
</div>
</body>
</html>
I think I understand but feel free to comment if I'm misunderstanding your question.
I believe you're misunderstanding how internal JQuery linking works. First thing is take a look at the JQuery Mobile page anatomy, especially at the "Multi-page template structure" in your case:
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Basically every "embedded in the middle of page" section of your page will need to be a stand alone div marked with the data-role="page" tag. Its ID is going to be what you'll point an anchor to.
So in order for your internal <a href="#jib"> to work you have to have a built in div with ID = "jib"
UPDATED ANSWER AFTER COMMENTS
What you're looking for is $.mobile.silentScroll . You want to get your anchor link's Y-position and then have the page scroll to it. There is a little gotcha though. You'll need to add a little pause before the scroll happens because of the JQuery Mobile animations that happen on page transition.
function loadJib()
{
$.mobile.changePage('#jib',{transition:"slide"});
var yPos = $('#mylink').get(0).offsetTop;
setTimeout(function(){
$.mobile.silentScroll(yPos);
},800);
Take a look how I did it ( .8 second delay ).:
http://jsbin.com/ahevav/3/edit
I am using phonegap like this in my application, also note the app is being styled by jquery mobile,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
I have this html,
<div id="sync" data-role="page">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="back">Back</a>
<h1>Sync</h1>
</div>
<div data-role="content">
<button onclick="sync()">Sync</a></button>
</div>
</div>
I have compiled this for Android and have it working on my Android phone.
But the button there called 'sync' is not always responsive. I click the button and the sync() method doesn't get called every time. I find myself clicking the button a number of times. I can see the button moving when I click it, it is responding by drawing itself being pushed in, but the sync method is not being called.
The sync method starts like this,
function sync()
{
alert("syncing");
$.mobile.loadingMessage = "syncing";
$.mobile.showPageLoadingMsg();
I put the alert in for debugging purposes.
UPDATE:
It has been pointed out that my HTML has an extra tag in it. I have removed it as below but the problem still exists,
<div data-role="content">
<button onclick="sync()">Sync</button>
</div>
I had a similar problem in my application. I tried two different things but I'm not sure wich fixed it.
I added charset="utf-8" in my script tag.
I moved the button click function in to its own script tag. I think there's an error in the other JavaScript block that is preventing the button click function from working when it's in that script block. So you can try isolating the button click JavaScript and see if that helps.
Joke answer: did you push the button hard enough?
Possibly the problem answer:
<button onclick="sync()">Sync</a></button>
^^^^---dangling tag
Is that </a> possibly the cause of the button breaking?