We Keep Coding

How to add Media Query in jQuery

This is the jQuery code that I am using in my WordPress website, and it's working fine.
jQuery(document).ready(function($){
$(document).on("click",".selected",function() {
$('.wvg-single-gallery-image-container').css('display','none');
})
});
I just want the code to stop working at the screen width of 766, on 766 the code does not have to work.
Let me know if there is something that can make this possible.
Thanks,
Abdullah

Consider the following.
jQuery(document).ready(function($){
$(document).on("click", ".selected", function() {
if($(window).width() < 766){
$('.wvg-single-gallery-image-container').hide();
}
});
});
If the document is not very wide, less than 766, the button will perform the action. Otherwise, nothing will happen.
See More: https://api.jquery.com/width/

You can use mediaMatch to test against a media query…
if (window.matchMedia('(max-width: 766px)')) {
$('.wvg-single-gallery-image-container').css('display','none');
}
…but that approach isn't a great one. Consider what would happen if the user resized the window after the JS had run. The inline style you are adding would still be there, but based on the wrong window size.
Instead, use JS to add and remove classes from elements. Then use those classes in your CSS with media queries.
$('.wvg-single-gallery-image-container').addClass('a-suitably-semantic-class-name);

jquery not quick enough to take effect

I have a need to add a class to certain pages - ones that contain an ID of #hero. For all other pages, the class must not be added.
Because I'm using asp.net with a few layered master pages, its not as simple as just adding a class directly to the html becuase the body tag sits a couple of pages above the aspx page.
I could locate the body tag, but so far I've tried to avoid that due to the added complexity, and instead tried to use jquery.
Here's the code:
$(document).ready(function () {
updateBodyClasses();
});
function updateBodyClasses() {
if($("#hero")) {
$("html, body").addClass("hero");
}
}
Nothing complicated, but here's the rub. By the time the class has been appended, the page has been rendered and the class doesn't seem to have any effect. However, if I test it by adding the class directly to the html, it works - so I know the CSS works and that its a timing issue.
I suppose I could add the code higher up the page - jquery is deferred, so I would need to know the equivalent javascript to try it out.
Would appreciate any thoughts on this potential solution, or perhaps and other ideas.
/* UPDATE */
For clarity, it seems to be the HTML related class that isn't being applied.

You can alter the DOM without waiting for it to be ready.
You need to:
load jQuery in a synchronous way(without defer or async).
Put #hero element i above the script.
Please consider this example:
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">I don't care about DOM being ready</div>
<script>
var $el = $('#hero');
if ($el.length) {
$el.addClass('red');
}
</script>

You can use IIFE(Immidiately Invocked Function Expression):
like:
(function()
{
if($("#hero")) {
$("html, body").addClass("hero");
}
})();

just put your function in document ready like
$(function(){
if($("#hero")) {
$("html, body").addClass("hero");
}
});

No real solution provided.
Not reasitic to change the whole site infrastructure - from one that defers jquery to loading it synchronously.
The two other jquery answers are as per the current setup and don't work.
The only working solution was provided by Tushar, although it would still require selective loading of the script, which was not included in the answer.
In the end, I used a workaround, which bypassed the need for any javascript. Instead of selectively adding a class to html tag, I added the css permanently to the html tag, affecting all pages. I then added an inner div, which reverses it out. This means that any page can now manipulate its own functionality directly without having to add classes to the html tag.

Hiding div on mobile devices only

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;
}
}

local href's won't mouseover/hover in WAMP

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>

Can Onmouseover be used outside a Hyperlink?

I'd like to build onmouseover directly into a javascript block. I can do it within a hyperlink but I need to do it in the actual script section for the code im writing. Can I do object.onMouseOver()? Or is there another way to do it?
So for example I'd like
<script>
something i can put in here that will make on mouseover work on a specific object
</script>

Yes. :)
<span onmouseover="alert('Hi there')">Hi there</span>
Do you mean like that?
edited to add:
Ah I see so like this?
<span id="span1">Hi there</span>
<script>
document.getElementById('span1').onmouseover = function() {
alert('Hi there');
}
</script>

You bind events to HTML elements not javascript blocks. If you are talking about binding events to elements using script, yes you can do it. You can use addEventListener to bind events.
document.getElementById("eleid").addEventListener("mouseOver", myEventMethod, false);

Yes you can so if you have a link somewhere in the page that you want to fire the hover for you can use the following.
http://jsbin.com/asoma4/edit
EDIT: I should add that the attached is just an ugly example to demonstrate that what you want to do can be done. I would look into popular js libraries (jquery, prototype, etc..) to clean this up a lot and make it easier.

You can use addEventListener in Firefox/Chrome/etc. and attachEvent in IE. See this page.
For example,
<div id="cool">Click here!</div>
<script>
function divClicked()
{
// Do some stuff
}
var theDiv = document.getElementById("cool");
if(theDiv.attachEvent)
{
// IE
theDiv.attachEvent('onclick', divClicked);
}
else
{
// Other browsers
theDiv.addEventListener('click', divClicked, false);
}
</script>
If you want to avoid having to write all that code, you can use a JavaScript library (jQuery, Prototype, etc.) to simply your code.