I'm trying to make a "help center" in HTML and i need to change the background when i hover on a selection, a div, I "figured" it out a little, but I have a problem, when I hover on the div I made the background change, but it hides everything else when i hover on the div, like for example, the div that changes the background is on the top of all others, so it hides all of them... There the JsFiddle
So I want to change the body background if possible, or make like i made and put a div as a background, to change it. I tried to make it like this:
selection:hover>body{
background-image:url(DIR);
}
But... doesn't work... So yeah, thanks to give it a try!
This is easy to implement with jQuery, which is a popular javascript library
I would do something like
$( "#someID" ).hover(
function() {
$( "#anotherElement" ).css( "background-color", "red" );
}, function() {
$( "#anotherElement" ).css( "background-color", "white" );
}
);
which will target the element with ID "someID" and then set the background-color of "anotherElement" to red while you hover over "someID", and set it back to white once you leave. You could also just target the "body" element, by doing:
$( "#someID" ).hover(
function() {
$( "body" ).css( "background-color", "red" );
}, function() {
$( "body" ).css( "background-color", "white" );
}
);
To include jquery in your HTML document you can load the jquery library from google's cdn by adding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
in your html document.
To call the code above, wrap it in a self-calling function like so:
<script>
(function(){
CODE GOES HERE
})();
</script>
If this does not immediately make sense to you, you should read this: Short Introduction to jQuery
I haven't tested the code, so there might be typos or mistakes, but the concept is usable ;)
EDIT: I have now tested my code.. It does work, please see below
<!doctype html>
<html>
<head>
</head>
<body style="background-color:white">
<div id="someID">
<p>If you hover over this the color changes</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function(){
$( "#someID" ).hover(
function() {
$( "body" ).css( "background-color", "red" );
}, function() {
$( "body" ).css( "background-color", "white" );
}
);
})();
</script>
</body>
</html>
Related
As part of a Chrome extension I provide for free to players of a browser game I’d like to load the contents of one of the game’s pages in a side panel I’ve added and then style it to fit the panel. This all works great except the page in loading has a script that changes the game menu bar to that pages selection. Now unfortunately every time my panel loads it changes the menu button selected. Is there any way to use load() and block a specific script or function? I can’t just load the body because they head contains other functions that I need.
Any help or advice is appreciated!
Here is the code block I'm currently using to load the side panel:
//**************************load the events panel**************************
if (document.URL.indexOf("combat_events.game") < 1 )
{
$('#hzevents').load('https://www.heroesrisinggame.com/game/combat_events.game', {}, function(){
$( "#hzevents" ).contents().find( "#happeningNow" ).css( "display", "none" );
$( "#hzevents" ).contents().find( ".event_title" ).css( "font-size", "14px" );
$( "#hzevents" ).contents().find( ".event_title" ).css( "background", "none" );
$( "#hzevents" ).contents().find( ".event_content" ).css( "margin-left", "10px" );
$( "#hzevents" ).contents().find( "h2" ).css( "font-size", "14px" );
$( "#hzevents" ).contents().find( "h3" ).css( "font-size", "12px" );
$( "#hzevents" ).contents().find( ".btn" ).css( "padding", "4px" );
$( "#hzevents" ).contents().find( ".framed" ).css( "width", "200px" );
$( "#hzevents" ).contents().find( ".row" ).css( "display", "grid" );
$( "#hzevents" ).contents().find( ".row ~ div" ).css( "display", "none" );
$( "#hzevents" ).contents().find( ".row ~ div" ).css( "padding-bottom", "60px" );
$( "#hzevents" ).css( "height", "auto" );
$( "#hzevents" ).css( "min-height", "270px" );
});
}
As it turns out I didn't need the entire remote page because many of the scripts required for the page to work are on all of the pages. I was able to change the load function to only bring over an element with an ID of events and that did the trick.
$('#hzevents').load('https://www.heroesrisinggame.com/game/combat_events.game #events', {}, function(){
I am trying to change the CSS on specific elements inside the page (since I need them to be different on specific pages) Trying to do this to no avail.
<script>
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
$(document).find('.screen-nav li a').css({
'color': '#fff'
});
$(document).find('.screen-nav li a:after').css({
'background-color': '#fff'
});
</script>
However you are trying to find the html element from document which runs before DOM is ready. Therefore you need to bind you find function after DOM is ready and jquery script should be with in document.ready function and try to change css property from jQuery like this:
HTML
<nav class="screen-nav">
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</nav>
JQUERY
$(document).ready(function(){
$('.screen-nav li a').css({
"background-color": "yellow",
"font-size": "200%",
"color":"#000"
});
});
Working demo here
Its better to execute these CSS changes after the document has completed loading.
$(document).ready(function(){
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
});
You can also reduce the code above to simply query the objects from the class. Since your parent object is the document, you can directly use JQuery selectors on the CSS classes
$(document).ready(function(){
$('#nav-icon span').css({
'background-color': '#333'
});
});
Is it possible to get the state of movement in CSS, without JQuery, and use it for hiding the scrollbar?
This should be achievable trough jQuery
Scrollevent with jQuery:
https://api.jquery.com/scroll/
Scrollevent Stop:
jQuery scroll() detect when user stops scrolling
Hide Scrollbar:
Hiding the scrollbar on an HTML page
In the end, the could may look like this (not tested):
<script>
$( window ).scroll(function() {
//Show scrollbar
$( "body" ).css( "overflow", "scroll" );
// Check if we are still scrolling, else hide scrollbar
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// Scrollevent not happened, hiding Scrollbar
$( "body" ).css( "overflow", "hidden" );
}, 250));
});
</script>
May be for you guys is obvious but for me is not.
I would like to create an i help image, that when it is clicked it pop ups a window with information.
I have tried something like this but it does not help:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .
answer from my comments
Did you include the library jquery-ui?
include the jquery-ui library in your application.js file.
There are many many ways to accomplish what you need.
I will make a suggestion, there are probably other ways but this is something simple.
For the "i" image, I recommend you getting an actual image, better a png with transparent background.
Another option is using an iconic font, such as Font Awesome (example). It looks like an image, but it is treated like a font, so you can change the color, size, etc.
For the pop-up. Single option is creating a hidden div with absolute positioning and opening it with javascript/jQuery and maybe fading the background a little bit. You can google it a little bit and will find many solutions, one will fit your need for sure.
As a second improvement: If the content is very heavy, you may want to load it on demand via AJAX or other async ways, but first get the info window working :)
maybe you miss the $( document ).ready(function() { ... });
try with this:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( document ).ready(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
});
</script>
Can anyone tell me in the simplest code possible, how to load and unload an html page into a div named "myDiv", with a simple click?
When i press another button on my navigation menu, i will then unload "myDiv" and replace with another page.
Whats the setup for this?
edit
I have 3 pages (page1.html, page2.html, page3.html)
My navigation is as follows:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
I am trying to load those pages into "myDiv", each page replacing the previous loaded page everytime i click a different page button. Thats all.
I hope i made what im trying to do clear as crystal and hopefully not leaving anything important out.
Assuming you can use javascript/jQuery (you don't give a lot of info on your environment)...
Have a look at the jQuery load() method.
http://api.jquery.com/load/
<div id="myDiv"></div>
<button id="myButton">Click Me</button>
<script type="text/javascript">
$( document ).ready( function() {
$( '#myButton' ).click( function() {
$( '#myDiv' ).load( 'test.html' );
});
});
</script>
That should do your load. I'll leave the rest to you :)
EDIT:
OK, something more along the lines of what you're looking for...
Assuming you can modify the markup and add a class attribute to your a elements...
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#myDiv' ).load( $( this ).attr( 'href' ) );
});
});
</script>
So any 'a' element with the class of dynamicLoad will trigger this when clicked. We don't want the browser to try and follow the link, so we use preventDefault() and stopPropagation(). The only other difference is that we're not statically loading "test.html". We're determining what html page to load by using jQuery's $( this ), which represents the element that triggered the function. Use the attr() method, which returns the value of a specific attribute of the element. In this case, the href attribute.
Questions?