css tooltip link not working - css

I am using this code to show a tooltip on hovering a link:
<span id="zing" class="zing-wrapper">Keyword<span>This is description here</span></span>
The tooltip works but when I click on the link, it does not work. Please help.
I have put the code in js fiddle here:
http://jsfiddle.net/y9gb6LLj/

Hi jsfiddle uses frame to display resulting code and browser will prevent document.location.href behavior inside the frame. Your code is working as expected to me, copy your code and paste into html file, open it in browser and click your link, you'll redirected to google.

Related

In wordpress Chrome & Firefox element Inspector show View source does not, which is correct

I am trying to debug a Wordpress issue where a is being auto inserted before the end of the <script> tag, hence breaking the javascript.
If I view the element with the inspector, I can see a as shown below:
However if I viewsource, or download the html page and look at it, there is no :
});
});
setTheRepeaterButton();
});
</script></p>
At first i thought it was a chrome bug, but I get the exact same behaviour in firefox.
I would think there is no , however the script is broken which implies there is one. Which is correct, the inspector or the page source?
It looks like there is a hidden/invisible character before the final } in the script. Depending on your code editor, you can toggle a setting to view hidden characters or add a plugin (e.g. nbsp-vscode for VS Code).
Or the easiest solution is to delete the space between that } and the preceding ; and redo the code formatting.

stop page from jumping back to top when empty <a> tag is clicked

The title says it all, how would I make it using only html, no JAVASCRIPT, to stop the page from jumping back to the top if a user clicks on an empty tag? So for example, if at the very bottom of my site, I have a link that is empty, but click on it, it takes be clear back up to the top...
A simple solution to this would simply put in the a tag:
Title
In doing this, it won't scroll your page back to the top. To have it scroll back to the top, take out the a after the # symbol...so it would look like this:
Title
That is the best explanation I can give you without any code provided from you.
Give that a try and it should work with what you are asking for...No javascript is needed. In fact you can even make the #a jump to a different location if you'd like on your page :)
UPDATE:
This may suit you better! Add this to either a js file or add it inline with you html document.
Separate js file (just make sure to call it externally on your html file):
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
Example: $('#link a').removeAttr('href'); or $('.link a').removeAttr('href'); or even $('a').removeAttr('href');
Now, if you want to achieve this via inline on your html file, simply do this:
<script>
$('#Add_Your_Id_Or_Class_Here').removeAttr('href');
</script>
Again, you can use any of the examples above as well. In fact there are many ways you can achieve this now that I think about it...Hope that helps :)
If your link isn't supposed to be linked (such as when it's just a placeholder for where a link could be) then you should not add an [href] attribute to the <a> element

Inline window for a YouTube video

I have an image surrounded by a link:
<img src="image.png">
I want to open this link in a new window, like what I found in this site: http://www.licensario.com/
You recognize it by the play button that it has. Press on it and an inline windows will appear.
I think they using jquery-youtube-tubeplayer, but I'm not sure.
According to the source of the mentioned website, they using LightBoxMe for the inline window, which is a jQuery plugin in combination with TubePlayer (and here). On each website is written how to use these scripts.

Lightbox Display Loading Box at End of Page

I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.

where is the css styling which captcha creates?

I just signed up for captcha. It gave me php code to display the captcha box on the page and code to put on the server. It works fine but the input box is misaligned (it might be based on the rest of the styling of the page.) I want to modify it manually but I can't.
When I do an inspect code in google chrome, it shows me the styling for the input box I needed. I unchecked a particular style
position: absolute!important
and it now looks fine. Now I need to actually modify the code. But it says the location is registration.php:1. Where is this? Registration.php is the file which creates the html code for the page and it does a "require" for a captcha php file. But I don't see the css style in that file either!
See these 2 images to see where the CSS could be coming from:
1- In Chrome console under the elements tab
2- In Chrome console under the resources tab

Resources