We Keep Coding

How can I add a close button to a html video popup?

I have an image on my site, and when you click on the image, a video pops up and starts playing. I am wondering how I can add a close button on this video to go back to website rather than pressing back.
I'm pretty experienced with HTML CSS but very new to JS.
This is the code that causes the popup video.
<div class="image-wrapper">
<a href="assets/video.mp4">
<img src="assets/img.png">
</a>
</div>
Thanks for any help here.

I suggest that, you add all the code. HTML/CSS/JS and so, we can help you.
I recommend that, a snippet, that stackoverflow eases you.
enter image description here
The snippet is:
snippet
If you are new in JS. I recommend work with the framework jQuery.

change image on click on mobile device

I want the simplest script to change an image/button from one image to another image of the same size. Basically, the same button with different colors.
The button is on a website which will be only accessed by mobile devices. It will link to another website, but I already know how to do that. I've tried using the mouse event scripting I'm familiar with, but I still cannot get this to work. I want it to be as basic as possible.
Here's the script I'm currently using:
<img onclick="this.src='emergency-down.png'" onmouseout="this.src='emergency-up.png'" src="emergency-up.png" />

As long as you just want this to happen once, change <a href=""> to <a href="#">.

How to display pdf content in web page using html5 and jquery?

How to display pdf document inside my div. I am using HTML5 and jquery to build my mobile site. I need to display my pdf document inside a Turnjs div
need to flip pages and go to specific page

<div>
<object data="test.pdf" type="application/pdf" width="300" height="200">
alt : test.pdf
</object>
</div>
Read this thread - http://www.webdeveloper.com/forum/showthread.php?152923-PDF-within-a-DIV

You can use this code:
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Or use Google Docs embeddable PDF viewer:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>

Dare I speak it's name for fear of being castigated, but you could use an iframe and allow the browser to provide the navigation.

What I do is drag the pdf to google drive. Then, click on the new pdf (it will usually be upper left in google drive), click the share icon at the top, go to advanced, then click change and make sure the "Public" radio button is clicked. Click SAVE, then click DONE.
Now go back to google drive, click on the pdf to open it, then click the Pop-out icon (upper right, next to the X close icon). Once the pdf is now full screen, click the : more actions icon (three vertical dots) There you will find an "Embed" opportunity. Click that and you get the embed code. Voila!!
Note: The pdf gotten this way will be ready to paste into your blog or HTML website, AND any links in the document will work!! AND, there will be a little Pop-out icon in the upper right, upon hover, that makes the pdf full screen. And, you can pop it into a div if you want to put more than one on the page. Some examples are up at http://internetpdf.com.
John Burch

JavaScript page jump when updating element using ajax

I have a page which FITS vertically into the windo. When user clicks on the link, I get another page via ajax and plug it into the required element.
Everything works, But when user clicks on another link, page jumps up and it is annoying me.
I have tried using
<a href="#" onClick="showRoom('five');return false;" class="highlight">
//and
<a href="javascript:void(0);" onClick="showRoom('five');return false;" class="highlight">
and it did not work in both IE and Firefox - it continues to jump.
Is there any good working trick that could help?
I THINK that it has to do something with the renew. When I click the link - first, the LOADING ICON is showing. Only then, when reports table is available, it loads into the instead of icon. Therefore browser adds vscrolling bars when information is shown, but goes away in between reports switches and being replaced by small LOADING icon.
I think that I need to capture the scrollbar location when I click on the update link, then, after ajax updates the page, I need to call in another function that would scroll back to previous scrollbar location
This is how I "fixed" the problem, until real solution is discovered:
document.getElementById(showCoursesArea).innerHTML= '<center><img src=\"images/working.gif\"><h1><br><h1><br><h1><br><h1><br><h1><br><h1><br></center>';
pretty much it kepps my page LONG; therefore ajax updates are fitting right in.

'#' will take the user back to the top of the page, so I usually go with void(0). or if as you are saying second option is also not working than remove href and try out
or just try out
Link Text
or
<a onclick="javascript:myJsFunc()">Link Text</a>
or
Link Text
as id "0" will never be present on a page so that nothing happen.

When you click on a link with href="#" it is actually linking to the top of the document. You can actually just remove the href attribute completely.

How can I get a link to be recognized by a search engine while being created in javascript?

I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a URL which the user will be sent to if he/she clicks on the popped out image.
Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.
Anyone have any idea on how I can get this link to look good, and be visible by search engines?

Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).
Some examples of code that Googlebot can now execute include:
<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')">new page
open new window

Put the link right around your thumbnail:
<img src="thumb.jpg" />
Bind your expand function to the link and cancel the default behavior in your javascript:
$("a.thumb").click(function(e)
{
// show the larger version
e.preventDefault();
});

You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.

use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.
<a href="link-to-page1.html" class="thumb-link">
<img src="thumbnail1.png" alt="thumb 1" />
</a>
<a href="link-to-page2.html" class="thumb-link">
<img src="thumbnail2.png" alt="thumb 2" />
</a>
<a href="link-to-page3.html" class="thumb-link">
<img src="thumbnail3.png" alt="thumb 3" />
</a>
then in your javascript:
$(document).ready(function(){
$(".thumb-link").click(function(event){
event.preventDefault(); // cancel the hyperlink default action
// do your javascript here
});
});