I'm having trouble making my site function well both in JS, and without JS.
I have two standalone versions working just fine. Now, I have a photo-album. In the Javascript version, there is a FancyBox. There's the overview of all photos inside an album, and clicking an image will open up that image in FancyBox. In decent browsers, the url even changes with the ID of the image, so you can share an image easily. When the Javascript version is called with an image, the FancyBox gets loaded automatically.
The issue is with the non JS version. Here we have the same overview of all the images in the album, but the links are different. To solve this, I use the following script:
<noscript><!-- all the images here --></noscript>
for the non-JS version, and
<div class='jsonly'><!-- all the images here --></div> with
<noscript><style>.jsonly{display:none;}</style></noscript>
Now the issue is that I'd rather not have the whole js-version in the background of the php-version, because this is a rather biggy and also requires two extra queries. To try and circumvent these troubles, I used JS to set a cookie if JS is enabled, so I could filter it out in PHP. The issue with this however is, that when a user had JS enabled and suddenly doesn't anymore, it will still present the JS-version because of the cookie that's still there.
What are common solutions for problems like these? Should I just put it all in the background, or neglect the fact that some people might need to push a button to go back to the JS version?
You've got the logic backwards. If you want something to be visible only when JS is enabled, then you BY DEFAULT hide that content, then use JS to show it.
<div class="jsonly">...</div>
<style>
.jsonly {
display: none; /* hide by default */
}
</style>
<script>
$('.jsonly').show(); // will only work if jquery/JS is available.
</script>
Related
So I understand this may come across as a open question, but I need away to solve this issue.
I can either make the site do ajax request that load the body content, or I can have links that re-loads the whole page.
I need the site to be SEO compliant, and I would really like the header to not re-load when the content changes, the reason is that we have a media player that plays live audio.
Is there away that if Google BOT or someone without ajax enabled it does the site like normal href but if ajax or javascript allowed do it the ajax way.
Build the website without JS first, ensure it works as wished, each link linking a new unique page. Google parses your site without JS, so what you see with JS off is what he sees.
Then add the JS, with click handlers to prevent the default page reload and do your ajax logic instead. You could use JQuery and .load() to do this quite easily.
Other solution, you could use the recommended Google method ( https://developers.google.com/webmasters/ajax-crawling/ ), but it's more work and less effective SEO-wise.
Or you can put your audio player in a iFrame...
We all know that Firebug / Web Developer Toolbar, etc. can change the HTML/CSS of any page to our local machines. Upon refreshing, however, we know these changes are not saved.
How does someone save these changes for just our local machine, in an automatic fashion that would have our changes reappear after refreshing the site?
For example, say I go to a blog posting website, which is updated by someone every day. Say I wanted to color the background of every blog's title I've read a bright annoying red, (so quick viewing in the future would allow me to skip over these). In this case, imagine the title is always an h2 element. I would add an inline element to this heading, so:
<h2>The world ends this year!</h2>
becomes
<h2 style="color:red;">The world ends this year!</h2>
Is there any way to Mark, Highlight, or change this blog post title on just our local machine for automatic viewing in the future?
If you're aiming to personalize your own web experience I recommend a Greasemonkey script
that applies CSS programmatically. There is an equivalent plugin called Stylish which is the analog of GM for CSS. There are equivalents for Chrome.
If you're aiming to provide this functionality to users of a website you're creating, I'd look into storing personalized styling on the client-side using HTML5 DOM Storage.
You don't need any plugin or program to do that, just create the userContent.css file in your Firefox profile directory, and paste your custom CSS for the webpage you want, like:
#-moz-document url-prefix(http://www.domain.com/blog/) {
#content h2 {
color:red !important;
}
#content h2 a {
color:red !important;
}
}
you can find more customizable technique on the mozilla developer site
I'm sure there are browser plugins to do something like this - especially for Firefox, etc. (If not, it wouldn't be too complicated to create one.)
Otherwise, I'd investigate Greasemonkey, and write some custom user scripts to do just this. You could have the custom user script apply to all sites, and use a local data store to determine if the site has been previously visited or not.
Ideally, instead of duplicating the history store (since your web browser is already storing history), such a plugin would integrate with the browser history. However, this may not be desirable if you have your browser history configured to only save the most recent # of days, and if you want this listing of "read" posts to be maintained longer-term.
Our site's links and buttons do not work when viewed on an iPad. In fact, even clicking (or touching) an input field doesn't bring the field in focus or bring up the iPad keyboard.
The site's been built in PHP (CodeIgniter framework) with nothing too fancy in terms of UI (HTML, CSS, some Javascript and JQuery). No flash.
Any reasons why the site won't work on an iPad properly?
EDIT: I'm sorry if this sounds like a publicity post, that wasn't the intention. The domain name was included in the post but it's in the comments for those that care to visit and give it a try. I still have the error though - visiting on both an iPhone and iPad, the page shows up but the links and input field are not clickable.
Finally I found it. This is the solution:
Somewhere you've defined on the element where you cannot write:
input,select,textarea{
-webkit-user-select: none;
}
Change it to:
input,select,textarea{
-webkit-user-select: text;
}
It can only be one of a few things.
You have code attached to the mousedown event and are returning false.
You have some other JavaScript/Markup errors.
As suggested by "mu is to short" validate your code, see here
Remove the script at the bottom, for one it doesn't do anything and two the script tag has no charset attribute. Fix all of the above mentioned errors then post back if it is still not working.
You need to make sure you're dealing with the native events such as "touchstart" and "touchend" and "touchmove". If you handle these events you don't get "click" events.
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Click only fires if you don't handle the native events.
I am working on a page and having problem with the Fancybox close action for the Image gallery in the first button at the bottom, the gallery is closed but overaly is still there. Here is the test link
How ever the same settings are working for the second link "Floor Plan".
Secondly I am using a Tiny Scrollbar plugin for the gallery on the page. The thumbs on the left side have blue scroll bar if they are larger in contents. This scroll bar does not appear in Google Chrome, and sometime don't show up even in other browser if the page loads first time, then I have to refresh the page to show it. Any idea about the problem will be greatly helpful.
Thank you!
First off, I noticed you're suing jQuery 1.3, why?
Here's 1.6:
http://jquery.com/
It isn't that much larger, and its an updated library. That may fix your problem.
If that didn't work, then delete the fancybox.js, re-downlod and put it in again, same with css. Make sure the css is called at the end of your css document.
If that doesn't work, I suggest getting rid of your javascript files one by one until there is only fnaycbo xleft, it's obviously some conflicting code at this point, so you'll have to troubleshoot by trial and error, going through one by one to findout what script is preventing close. I don't have access to your server, so I can't test it.
It's most likely in main.js, so remove that first, and see if fancybox works then!
ETA: Scrollbar fix.
The problem is something is adding a disabled selector, it's javascript. But you could change up tinyscrollbar.js to fix it, or you could go to your css, find the line:
'#scrollbar1 .disable {display:none}
and remove that line entirley, it's causing your scrollbar not to appear in browsers the javascript is (for some reason) disabling in.
In my case I solved with the next modification:
$(document).bind("load", function() { $('#myTinyScrollbar').tinyscrollbar(); });
Well you have an error in console:
d.onClosed is not a function
It could be because:
Your using an old version of jQuery possibly not supported by Fancybox. Try updating to 1.6, though beware legacy plugins or code that could break due to the steep upgrade.
A compression issue. It's possible i.e. the Google Closure could of removed what it saw as "unneeded" code and therefore broke the functionality. Try using uncompressed Fancybox to see if it fixes it, if it does then you know this the issue, rather than your jQuery version.
Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});