I'm trying to do a simple resize and reposition of a div element that shows a ajax loading image. The content it loads can change size, so I want the div element to resize to be the size of the parent, which in this case is a table dimension with the id "thEngineCategories".
function resize_divProgress() {
var control = document.getElementById('thEngineCategories');
var div = document.getElementById('divProgress');
div.style.left = control.offsetLeft + 'px';
div.style.top = control.offsetTop + 'px';
div.style.width = control.offsetWidth + 'px';
div.style.height = control.offsetHeight + 'px';
}
The following is the javascript I have and it errors on
div.style.left = control.offsetLeft + 'px';
saying "div.style is undefined". Whats wrong here?
The div in html is as follows:
<div class="overlay" id="divProgress">
The js function is called as follows:
<th id="thEngineCategories" onmouseover="resize_divProgress()" >
The CSS is:
.overlay
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 300px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
opacity: 0.75;
filter: alpha(opacity=75);
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}
Is there a better way to handle what I'm trying to do?
I created a basic test page from the code you provided and couldn't reproduce the problem. This suggests there is something else going on in your page that is causing the behaviour you are seeing.
Could you take your page and pare it down to a minimal case that demonstrates the JavaScript error? You'll find performing this process often will reveal the cause of the error - you'll remove something and it will start working, indicating that something in that removed section of code is the source of the problem :)
div.style.width is not valid property for accessing width of div.
use div.offsetWidth and div.offsetHeight for width and height respectively.
Related
I work in a web development environment that uses WordPress. The theme we use is ThemeCo's Pro.
I'm still learning javascript (so please forgive me if I'm really far off), and I'm trying to use jQuery to write a piece of code that will allow an element to appear after scrolling 1vh of the page. Can anyone help me understand why this isn't working? I can't tell if it's my code, or my theme might not be allowing it. The theme itself uses jQuery on the front end, but has a javascript file I may edit, but for the most part, the frontend editor is pretty reliable for code.
I'm using pieces from this question to help me write it, as well as referencing the jQuery library.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var minH = $(window).height() * 1;
if (scroll >= minH) {
$("#circle-menu").fadeTo(500, 1);
}
else {
$("#circle-menu").fadeTo(500, 0);
}
});
Just to make sure I understand what you're trying to do, I'll quickly reiterate what your code does: Basically, minH is supposed to be 1vh, and if scroll is >= minH, you want #circle-menu to fade in.
That being said, I think we have to look at a couple potential issues with the code above:
1vh is really just 1/100 of the viewport height, which can be calculated as:
// this is 1vh, which is what you're going for
$(window).height() / 100
As opposed to:
// this is 100vh
$(window).height() * 1
The second would be that you're using fadeTo. The difference between fadeIn/fadeOut and fadeTo is that fadeTo doesn't affect an element's display property. It only affects an element's opacity property. This means that if the theme's default value for the menu's display property is set to "none", fadeTo is not going to make it fade into sight. To get around this, in my opinion, it would be better to use fadeIn and fadeOut instead, especially since it doesn't seem like you're trying to control different levels of opacity (which is what fadeTo is really needed for).
I made a quick code snippet to demonstrate the above fixes.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var vh = $(window).height() / 100;
var minH = vh;
if (scroll >= minH) {
$("#circle-menu").fadeIn(500);
}
else {
$("#circle-menu").fadeOut(500);
}
});
p {
margin-top: 10vh;
height: 150vh;
border: 2px solid #666;
}
#circle-menu {
font-family: 'Segoe UI', verdana, sans-serif;
font-size: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
box-shadow: 1px 2px 3px rgba(50,50,50,0.1);
z-index: 1;
display: none;
background-color: steelblue;
color: white;
padding-left: 20px;
padding-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="circle-menu">Menu</div>
<p></p>
I am trying to make a JavaScript game and I need a CSS object with an animation to move in place of an object I originally made using JavaScript. Basically, what I want to happen is have my "sword" CSS object move with my player object when I have it Unsheathed. I have been looking for a while and they only give me a result as to were it will be when the page is loaded. I need the sword to always be moving with the player. If my code is needed, tell me, and I will provide it. If you have any questions, feel free to ask. I am pretty new so go easy on the terrible JavaScript that may be provided.
PLEASE USE AN EXAMPLE RELATED TO MY CODE!
if you don't I probably wont understand what is going on....
Thank You in Advance
Focusing the the following element of your example I am only going to address CSS here...
....
<div class="player"></div>
<div id="swordl"></div>
<div id="swordr"></div>
....
To move #swordl and #swordr along with .player you can take advantage of a feature of the CSS position attribute.
When a containing element has CSS position: relative; children of that element with the CSS position: absolute; are positioned with reference to the top-left corner of the parent.
In the following example #player would be the parent, and #swordl and #swordr would be the children...
....
<div id="player">
<div id="swordl"></div>
<div id="swordr"></div>
</div>
....
/* CSS */
#player {
position: relative;
}
#swordl, #swordr {
position: absolute;
}
#swordl {
left: 4px;
top: 2px;
}
#swordr {
left: 12px;
top: 2px;
}
Note the change of class to id in 'player'
Now, whenever you animate the position of #player the two #swords will maintain their position relative to the top-left corner of their containing parent element: you will not have to animate the position of #swords explicitly.
Hope that helps. ;)
CSS position # MDN
You can use the transistion. I have included a couple examples. One example is just JavaScript, the other is not just JavaScript.
//Get Element By Id of 'movingdiv'
var div = document.getElementById('movingdiv');
//Create the timeout (not required)
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)
#movingdiv {
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 10px;
left: 10px;
transition: all 2s;
}
<div id='movingdiv'></div>
//Create a div
var div = document.createElement('div');
//Give the div some style. IMPORTANT: notice the transition
div.style = 'width: 100px; height: 100px; background: black; position: absolute; top: 10px; left: 10px; transition: all 2s;';
//Append the div to the body
document.body.appendChild(div);
//Create a timeout for the div to move
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)
So I sort of got it working. I believe I am not understanding the javascript correctly.
I took this from another thread, however it isn't behaving quite the way I am trying to achieve. I see the variables are a math equation that bases the movement on the window height.
How can I manipulate the equation so that I can control "Some cool text."'s initial position (if you notice on load it takes the correct position, and then on scroll it gets moved by JS) to stay where I want it?
What controls the speed and intensity of the movement and how can I manipulate that?
I believe I am just not understanding the syntax that controls all these variables, can you point me in the right direction for some reading to understand these specific variables? Thank you. :D
https://jsfiddle.net/codingcrafter/kv9od1ju/22/
/* Custom Horizontal Scrolling Parallax */
.hero-two {
overflow: hidden;
position: relative;
min-height: 500px;
}
h1 {
-webkit-text-stroke-width: 0.1rem;
-webkit-text-stroke-color: black;
color: #fff;
font-family: 'Open Sans', Helvetica, Times New Roman !important;
font-weight: 900;
}
.para-ele {
position: absolute;
width: 100%;
font-size: 5rem;
}
#hero-first {
left: 75%;
top: 15%;
}
#hero-second {
left: -32%;
bottom: 10%;
}
.container {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
}
<div class="container">
<div class="hero-two">
<h1 id="hero-first" class="h1 para-ele">
Some cool text.
</h1>
<h1 id="hero-second" class="h1 para-ele">
Some boring text.
</h1>
</div>
</div>
$(document).ready(function() {
var $horizontal = $('#hero-first');
$(window).scroll(function() {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * ($(document).width() - $horizontal.width()));
$horizontal.css({
'left': position
});
});
});
So you want to move the text from left to right or right to left?
I have done something similar to your issue but I used jQuery to handle the scroll effect.
If you are going to use the code below you will need to wrap the text within a element with the class Introduction
As the page scrolls the element will append the styles dynamically to the element.
<h1 class="introduction">
WE ARE A <br><span class="d">DIGITAL</span><br>PARTNER
</h1>
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
$(".introduction").css({
transform: "translateX(-" + wScroll / 23 + "%)"
})
});
Demo: https://guide-nancy-64871.netlify.com/
When page is scrolled the header text moves to the left.
Read more on css transform: https://css-tricks.com/almanac/properties/t/transform/
Hope this helps!
I'm developing an application with ReactJS. I have a content editable div where the user can add pictures and write text on those pictures. In order to do so when the user adds a picture I append another content editable div to the main content editable and set the background to the picture he selected. This a screenshot of what it looks like:
(Note: still trying to figure out why I get that extra margin on the right, it doesn't happen with all pictures; I suppose it has something to do with proportions, rounding and conversion from 100% to pixels. Check the code below.) --> edit: this issue was caused by the border 1px of the div. I fixed it by removing 2px from the image width.
To resize the div and make it of the right size I add a hidden image tag where I load the picture, and on onload retrieve the height and width and set my div size accordingly, as follows:
// here I create the div that will have the background image
let div = document.createElement('div');
div.setAttribute('contenteditable', 'true');
div.style.backgroundImage = 'url(' + image.webformatURL + ')';
div.style.backgroundSize = 'contain';
div.classList.add('text-page');
// here I create the image tag that will be invisible
// the css tells the image to have width: 100%, hence
// the picture will grow to fit the width
let img = document.createElement('img');
img.src = image.webformatURL;
img.classList.add('editor-thumb');
// here I add the image to the div
div.appendChild(img);
// here I append the div to the main content editable with id 'editor'
document.getElementById('editor').appendChild(div);
img.onload = () => {
// once the image has loaded I set the div height and width
// I believe that somehow this is where I get the extra margin mentioned above
div.style.height = img.height + 'px';
// fixing the extra margin here below
div.style.width = (parseInt(img.width) - 2) + 'px';
// then I get rid of the picture used to get height and width
div.removeChild(img);
};
The css:
.text-page {
background-size: contain;
text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, 1);
font-size: 30px;
color: white;
line-height: 90%;
display: table-cell;
vertical-align: middle;
}
.editor-thumb, .text-page {
width: 100%;
height: auto;
box-shadow: var(--box-shadow);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
This is working, but I'm wondering if there's a better / cleaner way to do it. Any help would be appreciated.
There are multiple divs on my website and all have different background images loaded from different urls. I am using Javascript Dom. The opacity value of each div is dynamic.
The problem is that there is a span element appended to each div. The span element is a tooltip displaying the name of the div on hover. If I give opacity using
element.style.opacity = some_value;
The tooltip takes the same opacity as its background div, but the tooltip opacity should not change. Only the parent element's opacity should change.
This can be done using RGBA values if the div's background is a color. However, I have an image as background. Here is an example of what I am trying to do
element=document.createElement('div');
element.style.left= 150 + 'px';
element.style.top= 300 + 'px';
element.style.width=50 + 'px';
element.style.height=50 + 'px';
element.style.opacity = 0.5;
element.style.backgroundImage ='url('url_Link_Address')';
element.style.backgroundSize = 'cover';
element.className='viewCls';
tooltip = document.createElement('span')
tooltip.className='tooltiptext';
tooltip.innerHTML = 'Tooltip Text'
element.appendChild(tooltip);
Can anyone suggest any way to solve this issue?
Javscript and Jquery solutions are preferably.
CSS
.viewCls{
position: absolute;
}
.viewCls.tooltiptext {
visibility: hidden;
width: auto;
background-color: #F2E9BD;
color: #black;
text-align: center;
position: absolute;
display: inline-block;
overflow: hidden;
white-space: nowrap;
left: 100%;
top: 30%;
font-size: 13px;
font-family: inherit;
}
.viewCls.tooltiptext {
visibility: visible;
opacity: 1;
}
container=document.createElement('div');
element=document.createElement('div');
element.style.left= 150 + 'px';
element.style.top= 300 + 'px';
element.style.width=50 + 'px';
element.style.height=50 + 'px';
element.style.opacity = 0.5;
element.style.backgroundImage ='url('url_Link_Address')';
element.style.backgroundSize = 'cover';
element.position='hotspot';
tooltip = document.createElement('span')
tooltip.className='tooltiptext';
tooltip.innerHTML = 'Tooltip Text'
container.appendChild(element);
container.appendChild(tooltip);
So, I've created a container to contain both elements. The opacity should be applied to the picture only. Because what happens is that ALL elements that are contained in an element cannot have more than 100% opacity, so they will always look faded.
Now, you'll need to work out on your CSS (since you didn't show us anything) to have your tooltip align correctly where you wanted and you should be fine.