I have a problem where if the previous page browser button is used, the current page button state for the page that was previously viewed remains. This results in that multiple menu items appear in their 'current' state when the previous page browser button is used. If the 'current' state of the previously viewed page is rolled over, it reverts to it's normal state. Doesn't make sense? Click here to view the site. I've never had this issue before, and tired everything! Any advice appreciated!
Your issue here is that when you leave the page and then go back, your original image (which was hovered when you left) isn't getting swapped back to its non-hover state until the mouseout event occurs.
My suggestion would be to use background-image instead of imgs, and then you can change it on hover easily using the CSS :hover selector, something like:
<a id = "groove" href = "/groove/">
</a>
CSS:
#groove {
background-image: url('groove.gif');
height: 20px; /*just an example*/
width: 100px; /*another example*/
}
#groove:hover {
background-image: url('groovehover.gif');
}
I hope that helped!
Seeing as there is no Javascript associated with this, it seems like a simple issue of caching.
In any affected browser, try clearing your cache and then refreshing the page.
Related
I use a certain website to watch foreign videos, and recently they began shoving a bunch of annoying spam links that pop up on the site. One of these is an invisible link to a spam site that covers the entire page, making it so that you're forced to click on it if you want to do anything else on the page. You can see this yourself if you try going to the site, as you'll probably notice your cursor will look like it's hovering over a link no matter where on the page you put it: miomio.us. It happens no matter what page on the site you go to, and even after you accidentally click on it, it tends to keep reappearing.
I am aware that the Inspect Element tool on Firefox/Chrome can be used to temporarily edit the HTML of the page, and I wanted to know how I might go about editing the code to get rid of this and preventing it from reappearing (I know that changes will all disappear when I refresh but I'm fine with only temporarily making it go away). This is the HTML of the element:
<div id="d9wrz21" style="position: fixed; inset: 0px; z-index: 2147483647; background: black none repeat scroll 0% 0%; opacity: 0.01; height: 750px; width: 1536px;"><a id="lkhin" href="http://au79nt5wic4x.com/hzdiwnivp?awvo=41&refer=https%3A%2F%2Fmiomio.us%2F&kw=%5B%22youtube%E3%83%90%E3%83%A9%E3%82%A8%E3%83%86%E3%82%A3%E5%8B%95%E7%94%BB%E5%80%89%E5%BA%AB%E3%81%8A%E7%AC%91%E3%81%84%E3%81%8B%E3%82%89%E3%82%A2%E3%82%A4%E3%83%89%E3%83%AB%E3%81%BE%E3%81%A7%E3%83%90%E3%83%A9%E3%82%A8%E3%83%86%E3%82%A3%E3%81%AE%E7%84%A1%E6%96%99%E5%8B%95%E7%94%BB%E3%82%92%E8%A6%96%E8%81%B4%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%22%5D&key=09ebdae44542192f133e1224de135f65&scrWidth=1536&scrHeight=864&tz=-5&ship=&pst=&v=20.2.v.6&res=7.1055&dev=e" target="_blank" style="display: block; height: inherit;"></a></div>
If I try to right click on it in Inspect Element and click "Delete Node," the entire block of code simply automatically reappears. Trying to change the href also doesn't seem to work. Any suggestions on anything that can be done about this? I know nothing about HTML, so I would appreciate if responses could be put in layman's terms :D
I have a webpage with a simple navbar. The actual webpage can be seen here, and a CodePen demo can be seen here. In the CodePen demo, everything works fine. If I hover over a dropdown, the menu appears below. I can then seamlessly move my mouse down over that dropdown menu and select an option. In comparison, on the actual production website, things are not so smooth. The dropdown appears as expected, but as soon as I move my mouse down over the dropdown it disappears - it doesn't seem to register the hover event.
I've tried the following:
Setting z-index to be 1000 or 10000000 in the css for .dropdown
Doing step 1 with the added qualifier of !important;
In Chrome dev tools I tried giving other parts of the webpage lower z-index values, and it changed nothing
Notably, the drop-down is definitely hidden behind stuff. For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font).
Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Javascript, HTML, CSS, and any normal libraries such as Bootstrap or JQuery. Thanks!
EDIT: #lalitbhakuni's answer solved the problem for me. That said, it is possible that people who are dealing with the specifically identical circumstance to my own will run into this and wonder how to implement the CSS solution without access to the CSS for the entire web-page. Here is how I did it, in my banner code injection:
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
Your header is overlapping your navbar. The y nav dropdown is not working as a result. To fix this, can, you can please define header z_index as follows:
.transparent-header #header {
z-index: 10;
}
this is the code for a button that is currently operating
<a class="ng-click" ng-show="hasSuperUserAccess && !siteIsBeingEdited" class="addRowSite" ng-click="addSite()">
{{ 'SiteManager_AddSite'|translate }}
</a>
Add style="font-size:0px;" to the tag. This sets the font size to 0 pixels, rendering the link invisible but still usable via Tab and Enter key.
http://jsfiddle.net/kL0wm6yd/
#link-name {
visibility: hidden;
}
This will hide the element from the page, you cannot click on it, but using tab you'll be able to select it and use enter to 'click' it. It also still occupies space on the page (which is why you can tab/enter).
I used the fiddle to denote first line and last line, so you can see that the link is still taking up space, however it is not visible. (you can't use tab in jsfiddle so just upload that code to your page and it will work. Any more questions just comment here.
I have this problem in Safari and Chrome but not in IE.
When I click a button the mousedown event triggers some kind of CSS rule which makes it slightly wider.
Because of this it drops down onto the next row and the click event is not triggered.
It stays on the next row until the mouse button is released.
I'm working on a large existing site and it's difficult to isolate all the CSS, but I think this could be due to an effect inherent in the browser(s).
Is there a CSS way to stop any effects occuring when the button is clicked?
Thanks for your help.
This is the CSS I have found for :active / :hover.
I don't think this could cause it!
a:hover, a:active
{
text-decoration: none;
}
(The button is an image inside an anchor)
Open your page with Chrome. Right click on the element and select inspect element. On the right handside corner of the inspect element handler, you will see few icons.
Click on the middle one(Which is having a arrow. When you hover it a label will display as "Toggle element State").
Change the element state to active (and to focus if it didn't change anything), and now you will be able to see what css rules are used to apply those changes to your button(It can be a padding or width).
Since now you know what the rule is, you can undo it using another rule (Or using javascript). It's hard to say how to remove the effects without knowing what the effects are.
you can declare a class in css name it for exemple abortmousedowncss :
.abortmousedowncss{
width:yourwidth; !important /* this dont allow any css to overide it ;)*/
}
and you can apply it after with jquery like this :
$('#yourbutton').addClass("abortmousedowncss");
This is my situation; I am displaying ads on my website but I want to display a specific banner if a visitor is using an ad blocker. First thing I've looked for is a script that detects the ad blocker, but after trying a few different scripts it seems most of them no longer work (at least, I couldn't get them to work).
So I gave up on that and went with a different solution. Displaying a CSS background image behind the ad so that if the ad isn't shown, the image is. Because a typical ad takes a moment to load I made the background image a GIF image with 2 seconds of transparency. This works like a charm the first time, but when you reload the page or open a different page the GIF animation doesn't play and instantly displays the last frame, skipping the transparency.
I've tried adding random stuff behind the URL in the CSS, which didn't work. I've tried a data/inline version of the image, that didn't seem to work either. I'm kinda running out of solutions.
The CSS:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
background-image: url('/images/ads/ads_top.gif?randomstuff=39485')
}
I'm basically looking for either;
1) A way to show an alternative image if the ad is blocked (that is still actual and works).
2) A way to delay a CSS background image from being loaded.
3) A way to prevent a GIF from being cached or forced to replay the animation on each pageload.
Any of these would fix my problem. Hope someone is able to help.
Thanks!
Look this link. It is very simple and I don't think you need comments. Another question is how to set up time to each image.
Time to use some jQuery:
Your html code:
<div class='ads'></div>
<div class='ads'></div>
And the css code:
.ads {
position: relative;
top: 15px;
float: right;
height: 60px;
width: 468px;
}
Your jQuery code:
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
Your jQuery code have to be placed into the .js file. Do you have some js files? If yes, then add my code into onload handler. If you don't have any create new file, say, scripts.js and put this code into it:
$(document).ready(function()
{
$(".ads").each(function() {
var timestamp = $.now();
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')");
});
}
Explanation:
.ready function means that all instructions in body of this
function will be read and started on page load. You don't need them
to work before page loaded, right?
$(".ads") — we get element with selector .ads (with class ads).
$(".ads").each(function() { /* body */ } — .each function means that we will assign instructions from function body to all elements with selector .ads
var timestamp = $.now(); — getting timestamp and assigning it into variable
$(this).css("background-image", "url('/images/ads/ads_top.gif?"+timestamp+"')"); — adding css property to $(this) element (this element is current element with selector .ads)
Thats all. Simple. Now you have file scripts.js with content above. Put it somewhere on your site, where you usually put your media files. For example, {root}/media/ <-- here.
The last thing you should do is link your new js file and jQuery library. Note, that jQuery library have to be linked before file, using $ variable.
Add next code to the <head></head> tag to your view:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/media/script.js"></script>
Don't forget to do all js actions in onload handler.
Hope this will help. Tell me about result, please.
JSFIDDLE
A possible solution for option 1, is to check with javascript (or preferably jquery) if the banner is visible. (You probably need to put a setTimeout around it, because as far as I know the page js loads first, and after that the adblocker js.
var ads = $('.ads').filter(':visible');
if(!ads.length) {
//do your alternative image showing magic here
}
A possible solution for option 2 might be to link to a php script and put a sleep(2); inside it, with after that the appropriate headers and print/echo of the image.