jquery effect highlight not working - javascript

I'm banging my head against the wall using the highlight feature, for which i use quite often.
In the console when I run:
$('.2').effect('highlight', {}, 3000);
It returns:
[​…​​]
Which is the element i'd like to highlight. However it doesn't highlight it and I get no errors.
Funny story, because when this it works; but what I like about highlight, it natively has a duration it removes the highlight.
$(".2").css({ backgroundColor: "#FFFF88" });
Any ideas are welcome!
http://jsfiddle.net/XxyjE/1/

What else do you have setting the background color on that element? On those elements above it?
E.g. I'm noticing this issue occurs with the dark colors on Twitter Bootstrap's .table-striped class. It looks like they are coloring the TDs, which means you can highlight the dark TRs until you're blue in the face, and you still aren't going to see a color change.
Try a:
$('.2 *').effect('highlight', {}, 3000)
if you want to confirm if that's the issue or not. Then try to find a more specific selector from there.

$.fn.highlight = function(){
this.css("background", "#ffff99")
var self = this;
setTimeout(function(){
self.css("background", "inherit");
}, 500);
};

This ia an old question I know, but I encountered a similar problem just recently, and wanted to share the fix for any others who are having similar issues.
The problem was that the element I was trying to highlight had the transition CSS property set, and this apparently interfered with the highlight effect (making it completely invisible).

I had a style="background:white;" attached to my element. When I removed that, the highlight worked.

Related

Cypress hoverover GUI effect test

I started using cypress nowadays to learn better and deeper. I am faced with a problem that I can't handle. The problem is some kind of GUI effect working with mouse hover. While hovering my mouse on the element I can't see any information change into DOM. There are just ::before and ::after words appearing. I think I have to solve that problem with some javascript tricks. unfortunately, I am new to javascript and I don't have any idea if you help me I would be very happy. Thank you! (I want to assert in some way that grey background and plus icon is shown or not)
generically look like that
after the mouse hovers this grey background and plus icon comes
you can see elements DOM here
you can see the changes after the mouse hovers element
You can use the cypress-real-events plugin.
To install use the command:
npm i cypress-real-events
Then inside your cypress/support/e2e.{js,ts}, write:
import "cypress-real-events/support";
And in your code you can directly write:
cy.get("selector").realHover('mouse')
//Add assertions
Note: Since the above plugin uses Chrome DevTools Protocols to simulate native events, hence this will only work with Chromium-based browsers, so no firefox.
Into cypress' test try to use the method cy.wait("time here") following hover command.
This is very simple but for visual test this is so useful.
In order to access the :before or :after of an element, we have to do a little Cypress and JavaScript magic. This is answer is mostly from this link.
cy.get('.myClass')
.then($els => {
// get Window reference from element
const win = $els[0].ownerDocument.defaultView
// use getComputedStyle to read the pseudo selector
const before = win.getComputedStyle($els[0], ':before')
// read the value of the `content` CSS property
const contentValue = before.getPropertyValue('content')
// The above lines are just how we tell Cypress to get the `:before` value.
// There isn't a ton to understand outside of really diving into how elements and windows work together
expect(content).to.equal('foo');
})
So, using that same example, we can check for any CSS property on the element. For example, font-size:
cy.get('.myClass')
.then($els => {
const win = $els[0].ownerDocument.defaultView
const before = win.getComputedStyle($els[0], ':before')
const fontSize = before.getPropertyValue('font-size') // instead of `'font-size'`, you can substitute any CSS property
expect(fontSize).to.equal('20');
})
This can also be applied to :after, changing out ($els[0], ':before') with ($els[0], ':after').
Looking at your screenshots, I think you have a gray overlay element covering the original incident element.
The only code I can suggest is from the limited information is
cy.get('#IN-578')
.trigger('mouseover')
.should('not.be.visible')
The overlay has opacity 50%, so you can still see the incident details but from Cypress point of view the incident is covered so it will not be "visible".
If you don't have any luck with 'mouseover', try .realHover() from cypress-real-events.
After the above code, you should look for the overlay element in DOM and the + icon in the middle, select that icon and click it to take the action.

JQUERY CSS: Is it possible to trigger css filters through JQuery?

I'm working on a popup menu for mobile devices and would like for the website to blur and lighten in opacity when the menu pops up and go back to normal when it's closed. I figured a good way to go about doing it would be by triggering a css filter which led me to be unsure of the proper syntax to use in JQUERY. I looked into the matter more and so far I haven't been able to find examples of css filters being triggered in jquery so I continued playing with it to see if I could get it to work and so far have been unsuccessful.
Here are the scripts I came up with.
$("#menu").click(function(){
$("#popup").fadeIn('slow');
$("#close").css("display", "block");
$("#menu").css("display", "none");
$("p").css("opacity", 0.33);
);
$("#close").click(function(){
$("#popup").fadeOut('slow');
$("#close").css("display", "none");
$("#menu").css("display", "block");
$("p").css("opacity", 1);
});
The way I was trying to add in the css filter is
//This one shows no sign of the blur working but opacity works
$("p").css({"opacity": "0.33",
"filter": "blur(88%)",
"-webkit-filter": "blur(88%)",
"-moz-filter": "blur(88%)"
});
//These two break the whole code from working at all
$("p").css({"opacity": "0.33",
"filter: blur(88%)",
"-webkit-filter: blur(88%)",
"-moz-filter: blur(88%)"
});
$("p").css({"opacity": "0.33",
"filter: blur()" "88%",
"-webkit-filter: blur()" "88%",
"-moz-filter: blur()" "88%"
});
Of course these are attempts to create the blur which I added to the "menu" button. Here's a fiddle of it https://jsfiddle.net/Optiq/hsvvpfzu/5/
The more I looked and couldn't find anything made me wonder if this is at all possible. Maybe it's just me not knowing specific enough stuff to search for in order to find something relevant. Any source of info talking about using css filters in jquery are welcome.
UPDATE
The fiddle just simulates the code I've been working with on my site so it wasn't clear as to the element I was trying to effect. I have each page wrapped in a div that has a class name but no id. The reason I didn't give it an id is because I use it over and over on each page, so I figured it would be cleaner to just use the jquery to target the class and add attributes that way rather than giving each div a unique id then passing them all into a variable or something.
Of your three examples, the first one uses the correct syntax. The problem is that blur doesn't accept percentage values, only pixels. Defining them as pixels as such appears to have the desired effect for me:
$("p").css({
"opacity": "0.33",
"filter": "blur(1px)",
"-webkit-filter": "blur(1px)",
"-moz-filter": "blur(1px)"
})
Hope this helps! :)
Why not you assign and remove clss instead of css, implement with class is better one, you can also assign CSS but it require more code.
$(document).ready(function(){
$("p").addClass("myClass");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.myClass{
opacity: 0.33;
filter: blur(88%);
-webkit-filter:blur(88%);
-moz-filter: blur(88%);
color:red;
}
</style>
<p>Sandip Patel</p>

Changing page background via Javascript

I have been trying to get this to work for the past 6 hours and I am just unable to do it right. I've looked at the questions and solutions on SO as well to no avail. What am I doing horribly wrong?!?
All I have is a html5 page with no background. In my javascript code I call upon this method when the document is ready:
/*
* Initializes the landing page.
*/
function initializeLanding(){
$('body').css({
'backround':'url("http://40.media.tumblr.com/290e7a272b492735ddf8cd968e657d05/tumblr_nhmg6xYnv41u7ns0go1_1280.jpg")'
});
}
It should be something stupidly simple, and yet here I am. I've tried using single quotes, double quotes, without multiple attributes, etc. I would also much rather not use CSS or DOM properties to change the background, as I have set up way points along the page to change the background upon scrolling past them.
Also, if I call the .css() method and put in new attributes, will it overwrite all the old ones, or just the stated attributes in the latest css() call?
Update: here is where I call the function:
var main = function(){
$(".owl-carousel").owlCarousel();
lorem();
initializeLanding();
}
$(document).ready(main);
you have a spelling mistake.
backround => background.
check this demo
you have a spelling mistake. replace backround to background
function initializeLanding(){
$('body').css({
'background':'url("http://40.media.tumblr.com/290e7a272b492735ddf8cd968e657d05/tumblr_nhmg6xYnv41u7ns0go1_1280.jpg")'
});
}

Chrome/Webkit inline-block refresh problem

The problem I found is the following:
Situation: I have overall div that has a inline-block display. Inside it are two element that have an inline-block display as well.
Then I add (thanks to JavaScript) a <br/> between the two elements. The second goes to the next line, which is the normal behavior.
Buggy part: The <br/> is then removed (JavaScript again) and... the display doesn't change. It appears that the box of the overall div is not recalculated. In the end I have two similar markup that doesn't appear the same way (which is a bit problematic, isn't it).
It works fine on Firefox (it appears to be webkit based as the Android browser behave the same way). So my question is, is there a workaround that doesn't use methods that will alter the DOM? The library used is jQuery.
A test case here.
EDIT: As suggested by duri, I filled a bug report in webkit bugzilla, it's here. But I'm still looking for a workaround ;)
Way what I found: remove all childs from overall DIV, and then append all except BR's:
function removeBr(){
var ahah=document.getElementById("ahah");
var childs=[],child;
while(child=ahah.firstChild) {
if(!child.tagName||child.tagName.toLowerCase()!=='br')
childs.push(child);
ahah.removeChild(child);
}
for(var i=0;i<childs.length;i++)
ahah.appendChild(childs[i]);
}
http://jsfiddle.net/4yj7U/4/
Other variant:
function removeBr(){
var node=$("#ahah")[0];
node.style.display='inline';
$("#ahah").children("br").remove();
setTimeout(function(){node.style.display='';},0);
}
As a work around, you could set the style to display: block when you want them on individual lines and revert to inline-block when you want them to be friends.
I have created a JS Fiddle example
Which demonstrates this fix:
function addBr(){
$('span').css({ display: 'block'});
}
function removeBr(){
$('span').css({ display: 'inline-block'});
}
$("#add").click(addBr);
$("#remove").click(removeBr);
This bug still exists, so here's another workaround: http://jsfiddle.net/4yj7U/19/
$("span").css('display', 'none');
setTimeout(function(){
$('span').css('display', 'inline-block');
}, 0);
This makes Chrome re-render the spans and displays them properly.

JQuery: Why is hoverIntent not a function here?

I'm modifying some code from a question asked a few months ago, and I keep getting stymied. The bottom line is, I hover over Anchors, which is meant to fade in corresponding divs and also apply a "highlight" class to the Anchor. I can use base JQuery and get "OK" results, but mouse events are making the user experience less than smooth.
I load JQuery 1.3 via Google APIs.
And it seems to work. I can use the built in hover() or mouseover(), and fadeIn() is intact... no JavaScript errors, etc. So, JQuery itself is clearly "loaded". But I was facing a problem that it seemed everyone was recommending hoverIntent to solve.
After loading JQuery, I load the hoverIntent JavaScript. I've triple-checked the path, and even dummy-proofed the path. I just don't see any reasonable way it can be a question of path.
Once the external javascripts are (allegedly) loaded in, I continue with my page's script:
var $old=null;
$(function () {
$("#rollover a").hoverIntent(doSwitch,doNothing)
});
function doNothing() {};
function doSwitch() {
var $this = $(this);
var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name
if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next
$this.addClass("highlight"); //adds the class "highlight" to the current switch div
$("#panels div").hide(); //hide the divs inside panels
$("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown
$old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed.
};
I get the error:
Error: $("#rollover a").hoverIntent is not a function
If I change to a known-working function like hover (just change ".hoverIntent" to ".hover") it "works" again. I'm sure this is a basic question but I'm a total hack when it comes to this (as you can see by my code).
Now, for all appearances, it SEEMS like either the path is wrong (I've zillion-checked and even put it on an external site with an HTTP link that I double-checked; it's not wrong), or the .js doesn't declare the function. If it's the latter, I must be missing a few lines of code to make the function available, but I couldn't find anything on the author's site. In his source code he uses a $(document).ready, which I also tried to emulate, but maybe I did that wrong, too.
Again, the weird bit is that .hover works fine, .hoverIntent doesn't. I can't figure out why it's not considered a function.
Trying to avoid missing anything... let's see... there are no other JavaScripts being called. This post contains all the Javascript the page uses... I tried doing it as per the author's var config example (hoverIntent is still not a function).
I get the itching feeling I'm just missing one line to declare the function, but I can't for the life of me figure out what it is, or why it's not already declared in the external .js file. Thanks for any insight!
Greg
Update:
The weirdest thing, since I'm on it... and actually, if this gets solved, I might not need hoverIntent solved:
I add an alert to the "doNothing" function and revert back to plain old .hover, just to see what's going on. For 2 of my 5 Anchors, as soon as I hover, doNothing() gets called and I see the alert. For the other 3, doNothing() correctly does NOT get called until mouseout. As you can see, the same function should apply for any Anchor inside of "rollover" div. I don't know why it's being particular.
But:
If I change fadeIn to another effect like slideDown, doNothing() correctly does NOT get called until mouseout.
when using fadeIn, doNothing() doesn't get called in Opera, but seems to get called in pretty much all other browsers.
Is it possible that fadeIn itself is buggy, or is it just that I need to pass it an appropriate callback? I don't know what that callback would be, if so.
Cheers for your long attention spans...
Greg
Hope I didn't waste too many people's time...
As it turns out, the second problem was 2 feet from the screen, too. I suspected it would have to do with the HTML/CSS because it was odd that only 2 out of 5 elements exhibited strange behaviour.
So, checked my code, dug out our friend FireBug, and discovered that I was hovering over another div that overlapped my rollover div. Reason being? In the CSS I had called it .panels instead of .panel, and the classname is .panel. So, it used defaults for the div... ie. 100% width...
Question is answered... "Be more careful"
Matt and Mak forced me to umpteen-check my code and sure enough I reloaded JQuery after loading another plugin and inserting my own code. Since hoverIntent modifies JQuery's hover() in order to work, re-loading JQuery mucked it up.
That solved, logic dictated I re-examine my HTML/CSS in order to investigate my fadeIn() weirdness... and sure enough, I had a typo in a class which caused some havoc.
Dumb dumb dumb... But now I can sleep.

Categories