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(){
Related
I'm using FullCalendar and I just integrated tippyJs for popover. It is having layout issues related to what seems to be zIndex. I have attached the Screenshot of my problem. You can see that popover is hiding behind the event wrapper. plus it is also not clickable. I can use some help in showing complete popover box above anything. Your help is greatly appreciated. Thanks
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
theme: 'light',
zIndex: 9999,
});
tippy v6.x has prop appendTo read here
so you can try appendTo: () => document.body
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
appendTo: () => document.body,
theme: 'light',
zIndex: 9999,
I don't know if you found a solution about it but I had the same problem. The library (CSS) was badly imported for tippy.js and popper.
So I just had to add the cdn file in the index.html and all worked fine.
I had these files in index.html
<!-- Development -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5"></script>
<!-- Production -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5/dist/tippy-bundle.iife.js">
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
theme: 'light',
zIndex: 9999,
});
Remove the interactive params, it should normaly works :)
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>
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>