We Keep Coding

Making a countdown clock that resets and changes the page content

I'm slowly learning to implement Javascript into my websites to generate automated changes, actual code is scary for my graphic designer approach but I think I'm getting there.
I followed an exercise some time ago that had me make a countdown clock that resets every time it reaches 0, nothing to crazy but it got me thinking:
Is there any way to make that reset affect the content of the entire page?
The practical case that made me think of it is the website of a restaurant that has a different coupon every day of the week, they upload the coupon code to their social media everyday but if I could develop a site that loops the codes depending on the day and make it change the text content and the stylesheet on it's own the process would be automatic.
I can't figure out how you'd link the clock reset to that change though, tried searching for it and I think this might be solved with some AJAX shenanigans, but it seems to be a bit too specific to find, any guidance would be greatly appreciated.

Hi and welcome to stackoverflow. This is a very general question. It is hard to answer without specificity that requires knowledge the community doesn't have. For example:
When you say "I followed an exercise some time ago...", what did the code look like? What was your final product? How is JavaScript used?
When asking a question in stackoverflow, it can be helpful to share a snippet of what the code looks like so that others can help by testing the code themselves and giving feedback. Or at the very least observing the functionality and maybe catching small syntax errors.
To the second point of "Is there any way to make that reset affect the content of the entire page?" Yes. There are MANY MANY MANY ways to affect content of a page, either in pieces or in its entirety. Once again it depends on what you want to do with the code that YOU have specifically. Even with the basic tools of HTML and JavaScript you can do this. You don't need "AJAX shenanigans" LOL.
If you are just starting out, dig deep into the basics of JavaScript(if that is your preferred language). You will find a whole host of versatile functionality through creating objects, methods, manipulating the DOM, building your own event handlers, etc. Also if none of what I just wrote makes any sense, then you now have some terms worth researching on your own.
I hope that this is helpful for you, and I wish you the best of luck on your coding journey.

Is there a way to stop users cutting and pasting content from my HTML pages? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have content that has taken me a long time to create. From what I understand there is no way to stop a person getting at the content and copying it if they access the source. However is there a way to stop the users from doing a simple copy from the screen? A non jQuery way. Thanks

Rules of the web 101: if it is on their screen, they can have it. That's because in order for the user to see content on your site, your site must first enter the realms of their territory, their turf, their house. In order for people to see your website, the stuff that is on your website must travel along the power lines that eventually leads in to their home. Once that information is in their home, it's just a matter of keeping it there. It's just the way emissions work.
You can use tricks to make it harder such as converting your text to an image so the user has to type it out again, but OCR can work around that, and it'll take up more precious space on your site. You can disable right click, but this is easy to work around. Not only do browser extensions exist to re-enable right clicking, Javascript could easily be turned off in any browser, breaking that protection. You could use Flash to protect your text, pretty much the same case scenario as an image. No matter what you do, the user can in some way record or recreate your content. If it is copyrighted, the only way is to use the legal system to ensure there are no unauthorized copies, but once again, the rules of the web state if it is on their screen, they can have it.
Some answers will probably suggest these tricks to make it harder, and you can implement them, but they are never foolproof and they might scare away what was otherwise a potential fan or customer. Since I know all this, if I see a site that disables right click I feel like the site owner doesn't know how useless it is what they're doing, and by extension don't know what they're doing at all.

anybody who even know how to access the developer tools of the browser will tear down the page and get the content needed anyway...so if you ask me it is not really worth the effort and plus it just gets annoying to users and a bad UI design .
but even if you disregard the above paragraph then here is a link you can refer.. http://www.hypergurl.com/norightclick.html
here is another way you can slow down people from copying images..
<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by GreenLava (BloggerSentral.com)
Version 1.0
You are free to copy and share this code but please do not remove this credit notice.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
alert(alertMsg);
return false;
}
}
var alertMsg = "Image context menu is disabled";
document.oncontextmenu = nocontext;
//]]>
</script>
Now this diables right click on images that was defined with "img" tag....you can extend this to other tags as well.
But for usability sake dont do it as it is not worth it and also wont achieve anything.

DO NOT DO THIS
...As if you are gonna listen to me. One of the most straightforward ways is to use the built-in event copy. The event is trigerred when someone copies anything from the element to which the event is attached.
document.getElementById('myContent').oncopy = function() {
/*alert("do something if you want to here")*/
return false;
};
input {
width: 400px;
}
<span id="myContent">Your content which you don't wanna be copied!</span>
<br/>
<input placeholder="try copying and pasting the above here to test" />
See the above for a simple test. You can attach the event to the html element to add the effect to all the elements.
DO NOT DO THIS
P.S. Check browser support for the copy event.

Single Page HTML Site - SEO technique [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I developed a Single Page Responsive Website for my company http://germin8.com/ . Everything is going good however I actually now face a problem with SEO .The site's different sections do not show up in search engine.
I know the cause it being a single page site so not crawler friendly...Inorder to get the URL change I used history pushstate technique and have put href links for menu bar items to sections ..... confused ?? eh
Sample anchor tag outlink ( I thought this is enough for my section to show up in Search Engine :-/ )
a style="text-decoration:none;color:black;padding-left:30px;" class="scrollTo" id="contactUs_Menu"
href="/contact-us">CONTACT</a></li>
Or you may have a look at the source code of the website and follow the anchor tags.
On some research and POC I came across this AJAX crawlable technique by google (https://developers.google.com/webmasters/ajax-crawling ) ...however I couldn't understand it and also feel loading site's sections through ajax would be a lot more work at this stage since my entire site is a static HTML file ( index.php ) with nothing rendered dynamically through javascript/AJAX
Someone who has faced similar problem can you suggest me the simplest and fastest way for my site's different sections ( eg .Clients , Partners , Contact Us etc ) to show up in google engine
Thanks in advance guys :)

Actually this question is more suitable for https://webmasters.stackexchange.com/ but since it has been raised here, I'll try and answer this question to the best of my knowledge.
Unfortunately, there is no shortcut for SEO and to be able to fetch search results in your favor is a slow and painful process. The basic principle of SEO is doing simple things right and provide quality content to your users in your website and not worry much about the ranking.
That being said, your expectation is slightly unrealistic for the following reasons,
You are asking Google to index a page that doesn't even exist.
The URL is changed with JavaScript on runtime, which is something no-search-enginebot is good at indexing.
However, there are couple of things that you can improve in terms of SEO (not going to guarantee what you have asked),
Make sure you have sitemap.xml file in the root directory of your website. You need to add individual sub-page links for each url like this,
<url>
<loc>http://germin8.com/clients</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
Once you are done with sitemap.xml file. Open your Google Webmaster Account (also make sure your Google Analytics account is linked to your webmaster profile) and validate the structure and schema of the sitemap file.
Write better anchor text - Add title attribute to your anchor tags. Avoid inline styles as much as you can. Use complete url instead of relative paths for href attribute.
Google doesn't like slow websites. Hence, you need to focus a lot on the performance of your website. Also no user likes to see a webpage loading for ages. Make efforts to concatenate, minify and lint your assets(html/css/js). Gzip compression is required as well.
149 requests with 4.1 MB is huge. You need to reduce the number of HTTP requests you make massively!
Conclusion
Apart from the above, I don't really see your internal links not being visible on search results as a big problem. Your primary objective is to make sure that your users land on your webpage (this is something that you already doing). After the user enters your territory (website) he has the liberty to navigate to any section of the webpage.

http://webcache.googleusercontent.com/search?q=cache:http://germin8.com&client=firefox-a&rls=org.mozilla:en-US:official&strip=1
I dont see any problem with indexing of your site. Clients will not showup in normal search but they would show up in google images. You should give alt tag to best describe the client images that you have used. Above url will give you an idea how Google bot sees your site. So you can notice all text is indexed by google including your heading where clients are listed. Hope this solves your concern.

Best practice for element that needs to use javascript only (restrictions apply) [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Because of business rules and requirements, I need an element that is tab-able (without the use of tabindex), looks like a link, only has javascript functionality (it needs to make an ajax call to a web service for instance) and it cannot contain any special character such as '#' because the url will have that at the end and that will be blocked by our firewall which is set very strict due to external regulations.
Also the href cannot be empty because of our web site resides inside Sharepoint and keeping it empty means that you are redirected to the default landing page.
I've come across various questions which all contain some truth and arguments to use one element over the other, but none of those questions contained a satisfying answer, if it even had a marked answer. E.g.:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Is an empty href valid?
those two examples are not completely satisfying because for the first one, eventhough one answer has a high amount of votes but I'm not sure if that answer meets the above requirements. the second one for the same reason really.
In summary, which of the below options is preferred, keeping the restrictions and requirements in mind as well as known best practices for semantics and javascript?
OR
OR
OR
<button class="action"></button>
OR
<span class="action"></span>
WITH (example) ajax call:
<script>
$('.action').click(function() {
$.ajax({
url: "test.html",
context: document.body
})
.done(function() {
$(this).addClass("done");
});
});
});
</script>
As mentioned the restrictions cannot be changed. Period.

I remember once a teacher told me that the best was to use a <a> tag ahd the href should point to a page that probably does the exact same thing as the javascript event. So if for any reason the javascript is desactivated on the browser, the user could still use the website as any normal website... but well that works fine on papers... but it would be hard to implement.
If you add javascript code on the href or onclick your user wont be able to open the link on a new tab (by using the middle button or with the context menu)... I personally hate that on a website... links should be used to "link" pages.. not to make javascript changes on the current page, so a <button> seems more semantic to me...
You should also consider SEO (maybe) because robots will try to follow your links to index pages, but they wont follow buttons. Seo is a gray area, but i'd not be surprised if the robots have a max limit of links to follow.. and if your page has lots of links that are used only for js, maybe the robots are not able to correctly index your site
Finally, I rather have unobtrusive Js, so I really try to separate behavior from presentation. I find it ugly when i see html and js together
So i'd go with:
<button class="action"></button>
with an event listener on JS... hey.. but that's just me :)
Hope this helps

Personally, I like to use <a href="javascript:void(null);"> for my JavaScript-powered links. I know it's overkill, I know that javascript:; would be just as sufficient, but it's a habit I picked up.
That said, if the JavaScript has a non-JavaScript alternative (such as a link that might take you to a form, that has JavaScript to pop up the form in a dialog), I would use that as the href and make sure to prevent the default action in the event handler.
<button> is not a good idea unless you specifically want it to look like a button - depending on your site, this may be a good or bad thing, but you get a lot more freedom by using <a> and CSS.

'a' tag with any href you want + event.preventDefault() on onclick function can help you, I think. Why 'a', becouse it good for styling you tabs headers, for example

javascript and seo [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I have a javascript snippet that clients can put on their webpages that loads some text associated with embedded flash objects (like Slideshare presentations) on that page. Does Google crawl this type of content? Will this provide any SEO benefit? If not, what else should I consider. I don't want to force people to embed the actual content since they typically have multiple pages that use this script and the there is typically a lot of text. Any suggestions?

google does execute on page javascript quite well, but the current seo consensus is that external javascript (i.e.: asynchronous loaded content )does not count as part of the page.
this means, that script (the loaded text) is not seo valuable.
if you want the text to be valuable it must be onpage, means it must be in the html of the page, so basically you will have to go with the big (text already included) js snippet.
but before you rush to make it "seo-valuable"e please be aware that duplicate content is usually not valuable. so if the text shows up on different pages it might not be useful to include the text at all.

Flash is popular on the Web, but each presents challenges to the search engines in terms of indexing the related content. This creates a gap between the user experience with a site and what the search engines can find on that site.
It used to be that search engines did not index Flash content at all. In June 2008, Google announced that it was offering improved indexing of this content
(http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html).
This announcement indicates that Google can index text content and find and follow links within Flash files. However, Google still cannot tell what is contained in images within the Flash file. Here are some reasons why Flash is still not fully SEO-friendly:
Different content is not on different URLs
This is the same problem you encounter with AJAX-based pages. You could have unique frames, movies within movies, and so on that appear to be completely unique portions of the Flash site, yet there’s often no way to link to these individual elements.
The breakdown of text is not clean
Google can index the output files in the SWF file to see words and phrases, but in Flash, a lot of your text is not inside clean or tags; it is jumbled up into half-phrases for graphical effects and will often be output in the incorrect order. Worse still are text effects that often require “breaking” words apart into individual letters to animate them.
Flash gets embedded
A lot of Flash content is only linked to by other Flash content wrapped inside shell Flash pages. This line of links, where no other internal or external URLs are referencing the interior content, means some very low PageRank/link juice documents. Even if they manage to stay in the main index, they probably won’t rank for anything.
Flash doesn’t earn external links like HTML
An all-Flash site might get a large number of links to the home page, but interior pages almost always suffer. For embeddable Flash content, it is the HTML host page earning those links when they do come.
SEO basics are often missing
Anchor text, headlines, bold/strong text, img alt attributes, and even title tags are not simple elements to properly include in Flash. Developing Flash with SEO in mind is just more difficult than doing it in HTML. In addition, it is not part of the cultural lexicon of the Flash development world.
A lot of Flash isn’t even crawlable
Google has indicated that it doesn’t execute external JavaScript calls (which many Flashbased sites use) or index the content from external files called by Flash (which, again, a lot of Flash sites rely on). These limitations could severely impact what a visitor can see versus what Googlebot can index.
Note that it used to be that you could not test the crawlability of Flash, but the Adobe Search Engine SDK does allow you to get an idea as to how the search engines will see your Flash file.

You can have the content on an external page.
If you don't want Google to crawl it, block it with robots.txt
If you don't want Google to index it (possibly a better option) use x-robots or noindex in the head.
Whether you use javascript to pull it into the page, iframes, or both really comes down to implementation and what the included page may need to access on the page, tracking, sessions etc.

Although google does not crawl flash and java script so well but these are not the only things crucial for SEO. There are many other things which matters such as keyword density, quality of content, inboubd and outbound linking, titles and content should be well managed with proper tags etc. So if flash/java script is necessity then use it but do not use it in excess.

Google is not efficient at reading or indexing flash elements. If I had to publish content like slideshare, I would produce a PDF. This can be indexed with no problem, it could drag traffic to my website.

Google crawls Flash objects to some extent. But in my experience a best solution (if Flash is imminent) is to use SWFObject for alternative HTML text. This will make your Flash and your Site 100% Google friendly and, more importantly, user friendly.
For more information go here:
http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html

People read way too much into what Google will think about the technology or specific code they use on their site. If you're on the up-and-up and not using the code to cloak, deceive visitors or hijack sessions...you're going to be just fine. Will you rank better if you subbed all text for Flash? Maybe a little, but at the end of the day it's the quality of your content (yes, even if it's not text-based), the number of people that find it useful (via high quality links) and other small factors.
8 years ago, your answer would have been more valid for not including JS, but it just doesn't matter much anymore, Google treats navigable websites the same and ranks primarily around "quality", not usability excessive keyword rich text.