Am curious to know how you create a frozen/non-scrolling regions on a webpage using javascript! like the one used by Stackoverflow when they alert you of the badge you have earned with a "X" close button!
Gath
You don't need to use javascript, you can do it with CSS just by setting the CSS property "display" to "fixed". You can of course do this with javascript if you like, like so:
var element = ...code to get the element you want...;
element.style.display = 'fixed';
That's using CSS's position: fixed
body {
margin-top: 20px;
}
#banner {
position: fixed;
height: 20px;
}
Related
I am trying to add an image when an area of a canvas is clicked. I would prefer to use jquery but vanilla js or css is fine.
The problem is, I can add a click function using click and append, however it does not appear in the exact place i clicked, and this is what i want to happen.
also i am trying to add a touch event to the click event, and I get the error "expected one argument but got two"
(I am using a typescript / scss / pug preprocessor, gulp compiler)
i tried to randomize the x and y coordinates, however this just randomized them and didn't "bind" them to my click event. i also did attempt this with css using the :Active ~ selector, however it did not appear where the user was active, only at the top left of the container it's in. so i don't know if CSS is the way to go.
$("#clickimage").click(function(){
$('<img src="https://www.placecage.com/c/200/300">').appendTo($("#clickimage"));
});
$('#clickimage').ontouchstart = ();
css looks like:
#clickimage {
display: none;
}
attempted css:
:active ~ #clickimage{
display: block;
}
html
<canvas width="632" height="418" id="clickimage"></canvas>
Maybe something like this in vanilla JS will help you - the trick is using position fixed with offsetX/Y.
function paintImage(e){
document.querySelector('#wrapper').innerHTML += `<img src="https://www.placecage.com/c/200/300" style="left:${e.offsetX}px;top:${e.offsetY}px">`;
}
document.addEventListener('click', paintImage);
img {
position: fixed;
display: block;
background: #f00;
width: 100px;
height: 100px;
}
#wrapper {
width: 100%;
height: 100vh;
}
<div id="wrapper"></div>
I'm looking for a way to easily change one of variable's value. There's a chat in a browser game that I want to make taller. Changing height in dev tools does the work:
<div class="tsbchat" style="position: relative; width: 100%; height: 160px; margin-bottom: 20px;">
But can I make i.e. a script and put it in bookmarks that will allow me to change this value with one click? How would it look like? I know it's a trivial question but I'm a noob, you can remove the question and I will find help somewhere else. Thanks in advance!
The simplest solution is to type
document.getElementsByClassName('tsbchat')[0].style.height='600px'
in your console.
Remember to add [0], because getElementsByClassName returns an array
Another way is using jQuery
function handleClick(){
$(".tsbchat").css("height", "100px"); //choose the amount you want
}
.tsbchat{
position : relative;
width : 100%;
height : 160px;
margin-bottom: 20px;
border: 1px solid black;
}
<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>
This way you can make bigger your div but only once
Use this script instead if you need to use several times:
function handleClick(){
$(".tsbchat").css("height", function(){
return $(".tsbchat").css() + 100;
});
}
Note: not sure if this way you have to specify the "px" but i'm quite sure this works
For using a javascript function as bookmark you need to use bookmarklet.You can read up more here about it Bookmarklet.
For example.
javascript:( alert(' Hello i am clicked from bookmark '));
Add this to destination of bookmark. so as soon as you click on bookmark you will see a Hello i am clicked from bookmark alert.
You can do it like this
Here handleClick is a function which will be called when you click on div.Than we select the element by class name and change it's style.
function handleClick(){
let element = document.getElementsByClassName('tsbchat');
element[0].style.height = "1000px"; //chnage to amount you want
}
.tsbchat{
position : relative;
width : 100%;
height : 160px;
margin-bottom: 20px;
border: 1px solid black;
}
<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>
I developing a plugin and want to add on any page a div on the left side, like a console.
I saw CSS styles, but testing the plugin on greasymonkey not always show me the div, how can i do?
The CSS code that I'm using is this:
var div_console = document.createElement("div");
div_consola.id = "div_consola";
div_consola.style.cssText = "overflow:scroll;
z-index:300;position:fixed;left:0px; width: auto;
height: 100%; border: solid 1px #e1e1e1;
vertical-align: middle; background: #ffdab9;text-align: center;";
var body = document.getElementsByTagName('body')[0];
body.appendChild(div_consola);
So, when loading any page I add with Javascript this div and then populate with data.
Any help?
Thank you!!
A couple of things:
You have typos in the variable name. I assume you mean div_console and not div_consola
You are assuming that a z-index of 300 will suffice, which may or may not be true. A page could choose to implement a z-index of 301.
Is the rest of your css being applied to the div you wish to affect?
You have specified
overflow: scroll;
width: auto;
Depend of your browser, maybe your div have an undefined size and the scrollbar which pop hide your div.
That's what happened to me when I tried your code on jsFiddle.
Here is the result when I change it to
overflow : hidden;
width: 50px;
JsFiddle
Edit : If it doesn't resolve your problem, could you please precise the conditions (browser, etc) when it doesn't work ?
div_consola.id = "div_consola";
div.setAttribute("id", "div_consola"); <------ Try using setAttribute to set Id.
EDIT:
Using same Id name and variable name is also one of the issue.
When I changed the variable name in your code, it worked fine.
var div_consola = document.createElement("div");
var div = document.createElement("div"); <------ variable name changed
I'm working on an ecommerce store product page and need to show an "in-stock" graphic and an "out-of-stock" graphic. The platform has some limitations but there's a setting to show an out of stock graphic but not an in stock one.
What I'd like to do is have the in stock graphic hardcoded into the page by default. Like this:
<div class="inStock"></div>
CSS below:
.inStock {
width: 143px;
height: 40px;
background: url('../product_images/uploaded_images/in-stock.jpg');
margin-left: 60%;
margin-top: 5%;
position: absolute;
}
When a product goes out of stock, the platform backend automatically adds a div that looks like this into the page:
<div class="CurrentlySoldOut">
<p>
<span lang="en">Sorry but this item is currently unavailable.</span>
</p>
</div>
When the class "CurrentlySoldOut" appears, which is generated from the platform automatically, I'd like to override the current hardcoded "in stock" graphic with the out of stock via the background atrribute. Something like this:
background: url('../product_images/uploaded_images/out-of-stock.jpg');.
In short, is there a way to override a CSS class based on the presence of another class. Sort of like "if "CurrentlySoldOut class is showing, then addClass to another div" (where I will control the graphic.)
If you only need this to happen when the page initially loads, you can just change the class if any element with matching selector .CurrentlySoldOut exists like this:
if ($('.CurrentlySoldOut').length > 0) {
$('.inStock').removeClass('inStock').addClass('outOfStock');
}
Then of course you need to add the style/image-url for the outOfStock class to your css.
If your page is being updated while the user is already viewing it, then it would be slightly more involved. You could listen for changes to the DOM, and then call the code above. Something like this works in Chrome and Firefox:
function updateInStockStatus() {
// same code as above
if ($('.CurrentlySoldOut').length > 0) {
$('.inStock').removeClass('inStock').addClass('outOfStock');
}
}
// listen for DOM updates, calling above function
$('body').bind('DOMSubtreeModified', function() {
updateInStockStatus();
});
Since you probably want to support IE though ;) you could use setInterval with the function above to check periodically that the status has changed:
window.setInterval(updateInStockStatus, 5000);
That would check every 5 seconds, since the delay is in ms.
Try this:
if($('.CurrentlySoldOut').length)//true when CurrentlySoldOut exists
$('.inStock').css("background", "url(../product_images/uploaded_images/out-of-stock.jpg");; //change bg image
You can add a class with the new background, since the class name seems to be updated already:
.inStock {
width: 143px;
height: 40px;
background: url('../product_images/uploaded_images/in-stock.jpg');
margin-left: 60%;
margin-top: 5%;
position: absolute;
}
.CurrentlySoldOut{
width: 143px;
height: 40px;
background: url('../product_images/uploaded_images/in-stock.jpg');
margin-left: 60%;
margin-top: 5%;
position: absolute;
}
Try this
if ($(".CurrentlySoldOut")[0])
$('.inStock').css("background", "url(../product_images/uploaded_images/out-of-stock.jpg");
I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?
Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)
I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });
I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}