Javascript button in div layer positioning help - javascript

I currently have a div layer that includes some javascript (to display a button). I'm trying to position it on my webpage relative to the right hand side of the screen - how can I do this? I currently have something like this:
<div id="LiveChat_1308239999" style="
top:500;
right:500;
position: absolute;
"><script type="text/javascript">
var __lc_buttons = __lc_buttons || [];
__lc_buttons.push({
elementId: 'LiveChat_1308239999',
language: 'en',
skill: '0'
});
(btw I do close the script and div, it just won't show up here)
But it is still just displaying in the top left corner of my screen.

You need to use a unit when specifying position values:
top: 500px;
right: 500px;
Also, specifying a right value of 500 will put it 500px to the left of the right hand side - is that what you wanted?

You are missing units, the browser doesn't know if 500 is 500px, 500em or 500%:
<div id="LiveChat_1308239999" style="
top:500px;
right:500px;
position: absolute;
">`

Related

How do I obtain a floating element's left offset while it is outside the viewport?

Here's my situation. I've created several panels stacked side by side which are wrapped in a main container. Each panel takes 100% the viewport width and height. My goal is to be able to scroll horizontally to each panel when I click on their respective link. This works fine using a pure css approach. However, I'm learning jQuery and I wish to use the .scrollTo() method to achieve this.
When the panels were stacked one below the other (i.e vertically), I was able to obtain the top offset of each panel and scroll to their position nicely.
With the horizontal variation, I'm having troubles to obtain the left offset of the panels. I get a left offset of zero for all of them. If my logic is right, say the viewport is 1920px wide, the 2nd panel's left offset should be at 1920px, the 3rd at 3840px etc.
From the information I've gathered so far, it's because the panels are outside the viewport. And indeed, I've applied a width of 20% to the panels so that they were all visible in the viewport then I tried to alert their left offset. They were prompted to me successfully.
So how do I get around this issue ? It might seem like I'm reinventing the wheel but like I said, I'm learning jQuery so I need to understand why it's behaving as such and how I can solve this. Any help will be highly appreciated :) Below are snippets of what I have so far.
Thanks.
The Markup:
<div class="mainWrapper">
<section class="panel" id="panel-1"></section>
<section class="panel" id="panel-2"></section>
<section class="panel" id="panel-3"></section>
<section class="panel" id="panel-4"></section>
</div>
The CSS:
.mainWrapper, .panel {
position: relative;
height: 100%;
}
.mainWrapper {
top: 0;
left: 0;
}
.panel {
display: inline-block;
background: rgba(255, 255, 255, 1);
}
The Javascript:
$(document).ready(function() {
var $panelWrapper = $('.mainWrapper');
var $panels = $('.mainWrapper').find('.panel');
var $panelScrollPos = new Array();
$panels.each(function(i) {
//This is where I need help. It's not working
$panelScrollPos[i] = Math.round($(this).offset().left - $panelWrapper.offset().left);
alert('Panels position are: ' + $panelScrollPos[i]);
});
});
Please note that I have used .width() method to set the width of
.mainWrapper and .panel elements. I haven't included it in the snippet as it is working.
to be able to set your inline-block elements on a single line , no matter the width of the wrapper you should reset the white-space propertie:
#wrapper {
white-space:nowrap;
width:100%;
}
.child {
display:inline-block;
white-space:normal;
width:100%;
}
your fiddle updated : http://jsfiddle.net/n3e6xzbj/
You can try the getBoundingClientRect.
The result of that call has a left position which probably is what you seek.

CSS Positioning a table and blocks

¡Hello! I designed a Budget Calculator and implemented it in Drupal 7. You can see the result here:
http://www.delengua.es/curso-espanol-espana/calculadora-de-precios
I'm sure it has a lot of errors. But the one i want to fix is related to the position of the blocks. You may see that if you click on some option in the optgroup called "Cursos" (or in another one), you'll se an information square sided to the right of the table (i mean the table that contains the form). Specifically, if you click on "Cursos específicos" and you select something in the new optgroup, you'll get two information blocks. As you can see if you inspect them, they're positioned like this:
display: none;
position: absolute;
right: 6.5%;
top: 12.5%;
margin: 15px 15px;
width: 220px;
height: auto;
padding: 10px 10px;
Though that looks as working fine, it changes the position in firefox, and i'm frightened that it will cause more trouble. So my question is... would it be any other way to position it in relation to the table? I mean, the 'y' position should be the same as the table, and the 'x', the same + some number of pixels. I think it can be done through two ways:
a) With JavaScript (i don't know how, but i guess i could learn googling it).
b) Just with html and css.
As i prefer this option, i've tried to group the table and the information labels in only one '<div>', to declare the labels as 'inline:block;', to float them to the right, but when i do one of those things, i cannot modify the "top" position property. I got that ideas from other threads in Stackoverflow, but i don't know what can i try else. So i'll really thank any help.
Making a parent container position: relative will make the position: absolute on these elements relative to that parent container. Also, top/bottom/left/right attributes only apply for position: fixed, position: relative, and position: absolute. Floated elements ignore them unless one of those positions is defined, in which case the float is ignored.
I've tried something close to what you've said in the question and it worked for me without any problems.
First of all, wrap your form and infos in one div, like this:
<div id="wrap">
<form id="calculadoracont" method="post" onclick="test()">
// Your form
</form>
<div class="informacion" id="infoespecificos">
// Your info
</div>
<div class="informacion2" id="infoliteratura">
// Your info
</div>
// Your other infos
</div>
And in your css, just float them to where you want:
form {
float: left;
}
.informacion, .informacion2 {
// Remove the position absolute
float: right;
}
That will give you the same layout without absolute positioning.
Give it a try and let me know if it helps!

jquery fixed div while scrolling bounces around

I have a div (RightSide) on the far right side of my web page that sits just underneath another div (TopBanner). The TopBanner div maintains its exact position at the top of the screen even when user scrolls down. Exactly what I want. But I also want RightSide div (underneath TopBanner) to stay exactly where it is even when user scrolls down.
I have achieved this about 80% but it behaves strangely. When you begin to scroll down, RightSide begins to move up the page until it starts being obscured by TopBanner (goes behind it), and then suddenly it pops back down to its fixed position, and stays there for the remainder of scrolling. Here's the jquery that does the "popping back down":
var stickerTop = parseInt($('#RightSide').offset().top);
$(window).scroll(function () {
$("#RightSide").css((parseInt($(window).scrollTop()) + parseInt($("#RightSide").css('margin-top')) > stickerTop) ? {
position: 'fixed',
top: '0px'
} : {
position: 'relative'
});
});
It's the initial behavior of RightSide moving up the page for a hundred pixels or so before it pops back to its correct position that is driving my boss and our users crazy. I have experimented with changing "top: '0px'" to various values, but that only makes things worse.
It seems to me that the jquery that "re-anchors" RightSide doesn't get invoked until I've scrolled a hundred pixels or so, and then suddenly it moves the div down and keeps it in the right place after that.
Summary: I never want RightSide to move up or down, even while the user is dragging the vertical scrollbar (scrolling).
How can this be achieved? (I really don't want to use an iframe for this.) Thanks.
How about packing these two divs into one with fixed position? Something like this?
<div id="StickToTop">
<div id="TopBanner">
...
</div>
...
<div id="RightSide">
...
</div>
</div>
And CSS:
#StickToTop {
position: fixed;
top: 0px;
}
#TopBanner {
float: left;
...
}
#RightSide {
float: right;
...
}
Quick preview: http://jsfiddle.net/k5xH4/3/

Adding gadget in web page issue

I want to embed this gadget in my web page. That's why I use the embedding code (given at last, "get code") given on it. However, can't understand how to show it in specific position say for example right-top or say for example 500, 500 px. Can anybody help me how can I do this ? Thanks in advance.
Wrap it around a div and add styling. In the example top and right distance are set to zero pixels, if you want 20px from the top chagrin it to top:20x.
http://jsfiddle.net/efortis/uhPfr/
<div style="position: fixed; top: 0; right: 0;">
<script src="//www.gmodules.com/ig/ifr?url=http://www.pilyrics.com/gadgets/moneyc.xml&synd=open&w=320&h=645&title=LIVE+MARKET+RATES&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</div>
​

Centering a div contained inside a div relative to browser window when there's more content on the right

I've been working on my new portfolio/website and decided to go for a design that is basically one big index page that scrolls horizontally to show the different sections and vertically to show the content of the sections. Both the container and the boxed inside have a fixed width. The container is positioned relative and the boxes inside are floated left and positioned relative.
My question now is - how do I make it so that, regardless of the size of the browser window the user has when opening the website and even when re-sizing, the first box appears centered horizontally in the browser window AND without revealing the content that is on its right (content to which the user can scroll horizontally using buttons)?
The inspiration for my website came from this website http://www.cosstores.com/
I've inspected the code and I believe they are doing it using JavaScript and negative margins; but my Javascript knowledge is quite basic and I don't really understand how these negative margins are implemented effectively.
Would appreciate it if someone could explain how it works for the COS website or even come up with an easier alternative a noobie like me could use.
Thank you and please feel free to ask me to post anything else you think could help understand the problem better!
This is really quite simple, don't you worry. See it in action!
You'll need to work on a grid system. (You can use different-sized columns, but it's simpler if everything's nice and square.) Create a container div and a bunch of child "box" divs in your HTML:
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br />
<div class="box"></div>
<div class="box "></div>
<div class="box"></div>
<div class="box"></div>
</div>
Use <br /> to start a new row. Otherwise, rows will extend infinitely. The container div is exactly the height and width of one box, so it will only show one box at a time. But you can scroll, obviously.
Annotated CSS below:
#container {
font-size: 0; /* remove gaps between boxes */
height: 400px; /* show one box at a time */
margin: 0 auto; /* center horizontally */
overflow: scroll; /* show scroll bars */
width: 400px; /* show one box at a time */
white-space: nowrap; /* let boxes continue horizontally until manually <br />'d */
}
.box {
display: inline-block; /* stack up left to right */
font-size: 14px; /* undo font-size from parent so you can actually see text */
height: 400px;
vertical-align: top; /* line up tops of boxes within row */
width: 400px;
}
Then, to scroll to a location with Javascript:
$("#container").animate({ scrollTop: 400, scrollLeft: 800 }, "slow"); //with animation
$("#container").scrollTop(400).scrollLeft(800); //without animation
You'll need jQuery to use that code. Well worth it, since it hides browser inconsistencies in scrolling with Javascript.
If you want to use the browser's scrollbars, you'll need to use the body as your container. It's trickier, because you don't have a specified width and height. There is no way to hide elements (for sure) from every user—some have truly massive screen resolutions.
Basically, add a margin on each box so you get some space around it. With some quick JS calculations, you can figure out the location of each box and center it on screen. See updated fiddle.
Here's the relevant JS for anyone interested:
$("#scroll").click(function() { scrollCenter("#target"); });
scrollCenter("#home", 0);
function scrollCenter(target, duration) {
if (duration == undefined) duration = "slow";
target = $(target);
var offset = target.offset();
var top = offset.top - ($(window).height() - target.height()) / 2;
var left = offset.left - ($(window).width() - target.width()) / 2;
$("html, body").animate({ scrollTop: top, scrollLeft: left }, duration);
}
Run that OnDOMReady. The call to scrollCenter("#home", 0) forces the page to center the first box on load. You shouldn't even notice the jump.
Happy coding!
you should use the jQuery plugin scrollTo
http://archive.plugins.jquery.com/project/ScrollTo
Centering a div tag on the screen is easy. Set the margin property in it's css class to this:
margin:0px auto;
As for the rest of your question, this is a case for jQuery (in my opinion). Take a look at this link:
http://addyosmani.com/blog/building-spas-jquerys-best-friends/
And also google jQuery tutorials (you need to learn the framework first) and then, more specifically, "single-page sites" and "jQuery Paralax".
Good Luck!

Categories