When I run the following code and mouseover the href nothing changes (no highlight, no changed cursor). If I hold click on it, the hover event throws the alert.
I have no clue what could be wrong, this is impacting my web project, but also happening with very basic code.
html:
<a href='www.google.com' class='link'>Test</a>
css:
.link{
color: #000;
}
a.link:hover{
font-size: 18px;
color: #00FF00;
}
jsFiddle
Also removing 100% of the jQuery doesn't help either, I was just using that to debug what was going on.
Problem is rather unclear, I can just guess.
I think your page style is locally set to 'none'.
From https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently#w_reset-the-page-style
You may have inadvertently set the page style to No Style. To ensure Firefox is set to use the page's default style:
Press the Alt key to temporarily bring up the traditional Firefox menus, click on the View menu, then select Page Style, then click Basic Page Style.
Now that the page is using its default style, it may be displayed correctly.
(Similiar process for other browsers.)
this will fix your problem:
<script>
$(document).ready(function(){
$('#test').hover(function(){
alert('test');
});
});
</script>
or you can simply use:
<script>
$(function(){
$('#test').hover(function(){
alert('test');
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$('#test').hover(function(){
alert('test');
});
});
</script>
note: USE JQUERY LIBRARY 1.7.2
AND MAKE IT LIKE THIS
<a id="test" href="javascript:void(0)">Test</a>
Related
So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.
Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/
What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:
if (window.matchMedia('(max-width: 800px)').matches)
{
$('.flipper').click(function (e) {
$(this).toggleClass('flipped');
});
}
".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.
Any suggestions would be appreciated :)
You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:
$(document).ready(function() {
$('.flipper').on('click', function(e) {
$('.flipped').removeClass('flipped');
$(this).addClass('flipped');
});
});
Regarding matchMedia you can see by running the test snippet that it works:
if (window.matchMedia('(max-width: 800px)').matches) {
$('.flipper').css('color', '#f00');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
testing matchMedia
</p>
Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:
<script type="text/javascript">
$(function(){
$(".flipper").flip({
trigger: "hover"
});
});
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
To this:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(function() {
if (window.matchMedia('(min-width: 801px)').matches) {
$(".flipper").flip({
trigger: "hover"
});
}
});
</script>
Notice the media query added for desktop only, from 801px up.
As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.
I have a button which acts as a 'copy url' button. This works fine on none mobile devices, however I believe you can't have such a function on mobile devices as they rely on flash. On most mobile sites users must manually copy URLs.
So, I want to remove my 'copy url' button once a mobile device has been detected.
Before you grill me, yes I've read:
Hiding DIV if using mobile browser
I tried the solution mentioned in that thread, however it does not work. Any idea why? Here is my codepen:
http://codepen.io/rjtkoh/pen/dPxKeg
<head>
<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
</script>
</head>
<div class= "test">yo test me</div>
Much appreciated.
It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:
The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:
Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.
Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.
E.g.:
<script>
$(document).ready(function() {
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
});
</script>
The reason you're seeing this is because the DOM isn't fully built, so when you're trying to access it using $('.test'), it can't get it. You have to wait until it is fully ready.
Wrap your Javascript code in the ready function provided by jQuery:
$(document).ready(function () {
// your code goes here
});
This code will only be executed once all the DOM has been loaded.
Have a look at the documentation.
A simple way to do this is just add class to the html element when match some situation.
And use a selector to hide the elements you want you hide only when the class exist
This allows you to hide element even the <body></body> haven't actully loaded.
Besides, it requires minimal DOM operation.
So it won't lag the page when there are too many elements needed to hide.
Just put the codes in the <head></head>
<script>
if (navigator.userAgent.search("Some thing") >= 0 ) {
/*the html element*/
var root = document.documentElement;
root.setAttribute( "class", "hide-for-compitibility" );
}
</script>
<style>
html.hide-for-compitibility .selectors{
display : none;
}
</style>
Does anyone look at his codepen? Hey guy,
you did not include Jquery while using it. Put this in your HTML section <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
you put your script in wrong section, move it to JS section.
the mobile variable you obtained should be used in an IF statement. Example,
if (mobile)
$('.test').css('display', 'none');
else
$('.test').html('This ELSE leg should be removed');
Finally, getting the opinion of other answers that you should wrap your code inside a $(document).ready() function.
Here is an example and it do work. http://codepen.io/anon/pen/QweBgq
Another way that does not use Javascript is that you use CSS. Try below code in CSS section.
.test {
display: none;
}
#media (min-width: 768px) {
.test{
width: 200px;
height: 50px;
background: red;
display: block;
}
}
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
Upon the realization that you can't have an inline pseudoclass -- How to write a:hover in inline CSS? -- I looked into having Javascript do the same job with the onMouseOver and onMouseOut events to simulate the :hover pseudoclass. I'm trying to remove the underline from the text when the mouse is above it. Is there a snippet of Javascript someone can offer that can do that?
I tried onMouseOver="this.style.textDecoration="none"", but I think the contrasting quotations are throwing everything off.
Any ideas?
Note: unfortunately, this effect must be achieved without the use of an external or internal stylesheet (inline only).
you can do this by
onMouseOver="this.style.textDecoration='none';"
Here's your answer:
<a onmouseover="this.style.textDecoration='none';" onmouseout="this.style.textDecoration='underline';">hover me</a>
if you're able to use jQuery it would be easier. Just write once the following code. You haven't to change your markup then.
<script type="text/javascript">
(function($) {
$( function() {
$('a').hover(
function() {
$(this).css('text-decoration','none');
},
function() {
$(this).css('text-decoration','underline');
}
)
} );
} (jQuery));
</script>
I think you shouldn't use javascript, but CSS:
.underlineHover:hover {
text-decoration: underline;
}
<span class="underlineHover">Content</span>
Note: I used the class underlineHover, but be aware that classes should have a semantic meaning instead of styling one.
I'm using an externally rendered control to create an menu on a webpage. The control is coming from an cms system and can't be modified. When calling Cufon.replace() to change the font of the menu items provided we notice an flickering effect in IE8, like there is some sort of delay. In FireFox 4 and Chrome this effect isn't visible. I've read other topics on stackoverflow about it, but none seem to look similar to this problem. It only occurs on hovering over the menu item.
We're familiar with the fact the Cufon needs to be called straight after the html-element of which the font needs to be changed. Is this still necessary? Or do I need to call a Cufon.Now() somewhere? What is causing the flickering effect here when I hover about the menu-items?
<cc1:MenuBuilder ID="Mainmenu" MenuName="Mainmenu" runat="server" CssClass="menubar-nav-list" UseDiv="true" ShowLevels="1" />
<script language="javascript" type="text/javascript">
Cufon.replace('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
</script>
You have to execute the following code right after the <body> tag.
<script type="text/javascript">Cufon.now();</script>
And then call
Cufon.replace('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
or simply
Cufon('#Mainmenu .menuitem', { fontFamily: 'DIN Eng', hover: true });
The Cufon.now is doing the trick. For more information read the documentation. In this documentation they say to use it before the </body> but we found that this doesn't fix all the flickering problems but right after the <body> does.
I don't see anything wrong with your code, so this is just a shot in the dark.
To use DOM selection methods like #Mainmenu .menuitem (instead of just h1 or h2), Cufon requires a javascript library like jQuery.
Is it possible that jQuery isn't loading at the right time, or that you've set IE to no-cache mode, forcing it to redownload jQuery every time you reload the page?