Periodic HTML Text Centering - javascript

Im building a stopwatch with javascript and the issue is that although centering does work, the dynamic nature of the stopwatch means a very jittery effect when it constantly tries to recenter on every new number. As some numbers are wider or thinner, it means it keeps on "jittering". This is very distracting.
However, I still do wish for the time to centered on screen. I had success with keeping the time on just one side of the screen however it was not aesthetically pleasing. I was wondering if there was a way to only center the text once in say 1 min? (I was thinking of centering and then using padding to pad up to where it was centered, thus meaning it would be aligned against the padding and maybe redoing this proccess every 30secs or something)
Thank you

To stop the jittering effect, you could place the text inside a div and center the div.
stopwatch_container{
width: 100px;
margin: auto; /*This will center the div*/
}
stopwatch_text {
text-align: left;
}
Hope it helps.

Related

Automatically Animate/Scroll A Div Horizontally On Page Load

I have a seemingly basic question that I can't find any resources in what I am trying to acheive. I'm new to JavaScript and fairly mediocre at CSS.
What I am trying to accomplish is this. A page which can be displayed on a TV screen showing a list of sports results, overflowing to the right. I want the page to automatically scroll that div across to the right (which has a dynamic length depending on the amount of content) so it can see all the scores across all divisions and automaticaly scroll content to the right. When it reaches the end, pause, and then refresh (using Ajax) snapping back to the beginning.
I'm sure if I can be pointed in the direction of the right functions to use I can hook the various parts together.
Here's an example of something I am trying to run on page load that I'd like to scroll smoothly to the end over the course of 10 seconds, I just can't work out how to identify/set the "end" of the div.
$('#ScrollMe').animate({
scrollX: ??? //To div end;
}, 10000);
I think if I can solve this part, I can solve the rest.
Any pointers? Javascript, CSS.... open to anything!
You can use the .scrollWidth property to determine how far to scroll, subtracting the visible width will give a more accurate end point, eg:
(styles and animation time set to 2s, just to demonstrate what's happening)
$("#scrollMe").animate({
scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width()) + "px"
}, 2000);
#scrollMe { width: 100%; border:1px solid blue; overflow:auto; }
#inner { width: 6000px; border:5px solid red; height:20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scrollMe>
<div id=inner>
</div>
</div>
You just need to apply overflow: scroll css propertie, to the div you want to "overflow" the page width. So it will add a bar below the div, such as the default scrolling bar of every browser.
parentDivWithContentToOverflow{
Overflow: scroll;
}
This is a great example of what you need.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
But you need to specify the div to achieve this.
If your requirement is only to scroll to the end of the page(which is right), then you can use your example. But you need to specify the pixel location to scroll to right. For that, you might need something like the below.
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
The above code snippet was stolen from this answer 😁
https://stackoverflow.com/a/59520378/4972683

Hovering over an image in one div container to have an img or background appear in or over top of a different container

So I'm fairly new as far as coding goes, just so everyone knows.
I'm trying to accomplish two simultaneous things
1. The first is, I would like be able to hover over an image in one container and have another image in a different container appear. Even if that means having an image that technically overlaps the container and just happens to have the same dimensions (which are width: 350px and height: 205px, by the way). If another solution is to have the initial image be a clickable link to open the second image, that would be fine too. In fact, that'd be preferable.
2. I need to do this multiple times, each with different initial and secondary images, with float:right or a similar css function involving setting the sets of initial images being wrapped to the right of my first div container.
3. I need to maintain the set of initial images (buttons), in two rows, with overlap-y: hidden and overlap-x: scroll.
My css for the button images is this, and must either stay this way or have a similar effect:
div.img {
margin: 10px;
**padding: 5px;**
**height: 38px;**
**width: 38px;**
float: right;
display:inline;}
div.img img {
**height: 38px**
**width: 38px**
display: inline;
float:right;
margin: 10px;
**border: 12px solid #ffffff;**
**border-radius: 8px;**
**box-shadow: 3px 3px 1px #888888;**
I put all the key points of the css that I need to keep (or display in a similar fashion) in bold. The part in question is the display: inline function. I need my set of images to be in two rows, wrapping to the right side of the container (or at least scrolling horizontally), but instead they are displaying as two rows of three, then one vertical column that is no longer aligned with the two rows of three.
To see the type of solution I'm looking for, here's the page: http://hellothisismelody.tumblr.com/codeconstruction/
As you can see, it's set up like a Nintendo 3DS. I'm looking to make functioning buttons on the bottom screen that make an image appear in the top screen, and looking to have those images set up like the home screen of a Nintendo 3DS, which looks like this:
Click for Nintendo 3DS Homescreen
Thank you for you time.
Regarding your first question, you can use this:
<div class=container1>
<img src='blah1.png'>
</div>
<div class=container2>
<img src='blah2.png'>
</div>
$('.container1 img').hover(function() {
$('.container2 img').get(0).src = 'blah3.png';
});

Place dynamic DIVs in columns without vertical gaps between them?

Got a series of quotes of varying length to fit in DIVs of fixed width but content determined height. I could individually position each DIV so it looked tidy and there were no vertical gaps. For example - http://www.zergnet.com/. I wondered if there was a CSS solution to problem, as I noted Zergnet uses inline styling and absolute positioning of every news teaser (which makes me think javascript is involved somewhere).
.testimonialBubble {
position: relative;
width:48%;
margin: 8px 0;
padding:0 2% 0 0;
float: left;
}
The idea being no matter what volume of content is thrown (within reason) into the divs in the 2 col layout they'll fit together and fill spaces. At the moment if the 2nd element is longer than the 1st, when 3rd element kicks round under the 1st element there's a gap between the two caused by the 2nd elements height. Is there a CSS only solution or is it only achievable via javascript?
Many thanks for reading.

CSS Relative background not expanding on insertion of html code

Thanks for any help you can offer me/point me in the write direction.
I am not sure how to explain what is happening.
I current have a page with an image background (the image is 4044,2160 so it is larger than you would view on a single screen (normally)).
Currently when the page loads, the image is top-centered and is not on repeat and thus fills the background completely.
However when inserting html code (CRUD) via javascript, etc. with the resulting page becoming larger than the original in the y direction, the background stops and does not fill the space below.
http://postimg.org/image/jqzx0vuzr/
I am not sure what to do to fix it and most likely think it is a css problem.
Below is code:
HTML
<section id="index" class="index clinic">
<div id="x_container">
Javascript insertion of code
</div>
</section>
CSS
.clinic{
width:100%;
position:relative;
background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
height: 100%;
padding: 0;
}
#index.index {
padding:15% 0 0 0;
}
#xcrud_container{
width: 90%;
margin: 0 auto;
}
It seems that the javascript does not matter as to what is inserted, (have tried lorem ipsum, etc.)
But just to expand on what is inserted, the size of the x_container changes based on a state and this is altered by javascript. (Thus page is not reloaded and background size recalculated)
I have currently tried a clearfix solution (but to no avail) as well as attempting repeat-y on the background image.
Lastly I have attempted to manually create the page through directly saving the html code (i.e. it is not inserted by anything and is apart of the html code of the page) to the page and attempting to see if the background expands. It does not. The background fills the initial view area, however as soon as you scroll down the page, the white area reappears.
Just to make sure this is known the background image is larger than area viewed, thus the white area should not be present.
Any help would be greatly appreciated, as I have been at this for a few days...
Thanks
Change % to Pixels as for example.
.index{
height:1000px;
padding: 0;
}
Thanks for you help guys,
Through the comments and answer I have been able to figure out my own stupidity in trying to force a tag to define the background of the page rather than using body. i.e. .
The reason for my defining it as a section tag is due to its use on previous pages where the was followed by another section and thus the white space area would not be a problem. (Also is the reasoning for the height:100%;, as I had to define the height of the section as being 100% in order to fully create the image within the section.
Thanks again.

CSS Triangle Positioning

Basically what I want is a CSS Triangle that is vertically aligned in the center of my content, positioned at the right of my content with a slight padding without using explicit measurements based on the triangle's border-width.
The wrapper should expand to contain the CSS Triangle if the triangle is huge like in this example and the CSS Triangle should always be vertically aligned in the middle of the wrapper. If there is a large amount of text, the CSS Triangle should just overlap the text if they cross.
This seems perfectly reasonable, but I ran into some problems; check out this JsFiddle for where I'm at now.
If I assign a min-height, I can get to 1. below. The problem with 1. is that I have to choose an arbitrary height. Moreover, if content grows, it won't be perfectly vertically centered because of the top: 25% which doesn't truly put it in the middle. To allow multiple different sizes of arrows easily, I really don't want to assign a min-height or any height for that matter, I just want it to calculate its size on its own.
I also had to use an overflow: hidden to prevent the scrollbar from appearing because doing a right: -45px will push the "right side" of the CSS Triangle box, so I can't use an overflow: visible anywhere too.
If I remove the fixed height, then I end up with 2.
Is this possible to do without using an explicit height and other explicit measurements; how would you go about correctly vertically aligning it? If you have ideas using jQuery to grab widths and so forth, that's fine too - I've tagged it.
Here is some jQuery to get rid of the hard-coded heights after assigning an arrowBox class to your div:
$(document).ready(function(){
$(".arrowBox").each(function(){
var border = $(this).height()/4;
var right = "-"+(border-5)+"px";
$(this).find(".arrow").css("border-width",border).css("right",right);
});
});
http://jsfiddle.net/wzzRC/1/
That said, the difficulty with any pure CSS solution is that you can't specify border-width in %. So with pure CSS, use one of the other solutions to force the box to grow to accommodate the arrow. If you want a working arrow in smaller boxes, you need JS.
Set position: relative; on the white box container.
Set position: absolute; on the triangle with a top of 50% and margin-top: of half the height of the triangle.
That will make sure that the triangle is always in the middle.
Change the triangle css to have:
top: 50%;
margin-top: -50px;
http://jsfiddle.net/QuwEc/4/

Categories