CSS issue - my DIV stays collapsed! - javascript

On the homepage of my website - www.mobiuspc.com, I have some distinct sections that I color coded so I could see how its all laid out. There is the master page section, which works just fine (its the tan bar with buttons like "Components" and such), and at that level and up everything works as best as I could wish for.
Down below I have some issues. There are 3 primary DIV's that I use to break down the page:
<div id="mainarea" runat="server" >
This is anything in between the header/master page area, and the yellow color coded area. This big area is supposed to be 700px high, and 1024px wide, and is colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating hard drive image, that is my drop zone for Drag 'n drop functionality (unrelated to this question). I have it set to runat server, because if I don't do that, then Drag 'n Drop seems to break.
<div id="categorybar">
This is the yellow color coded area that holds all my buttons. I'm happy with it. Hit the button called "Display" and watch what happens to the DIV above it. It goes way out of bounds! My CSS to set its width and height seem to be overruled.
<div id="detailbox">
This is the blue colored area, no issues here. Eventually I will put controls in here, but for now it is fine being blue.
The initial thought might be that my CSS is borked. If this is the case, I can't see where! I've set the height/width and all that good stuff. I've tried added the float:left into random sections, to no effect. Here is the relevant excerpts from my CSS file"
#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}
#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}
#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}
I create objects at run time when you click the "Display" button, and all those objects are added to a pane that resides in the #mainarea DIV. That pane is known as toolbox, and here are it's CSS properties:
#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}
For some reason it keeps expanding beyond its predefined size when I add controls at runtime instead of simply having a scrollbar like I would prefer. The panel with all the hard drive pictures as the drop zone, that is also in the #mainarea DIV, and here is the CSS in case its relevant:
#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}
Should I get rid of the runat=server bit? If I do that and click on the display button, I still get that horrid panel expanding itself all the way to the bottom of the page, but at least the silver colored #mainarea DIV stays the proper size (the panel just gets out of control). If I go that route, any idea why it breaks my drag and drop? I hope I don't have to go that route, and instead there is simply something goofy in my CSS that I'm overlooking...
Thanks for your help!
Bill

runat="server" will change the client id of the control you are using it on meaning your #mainarea css will not apply.
You could get around this by assigning mainarea a css class and using that to apply styles rather than its id.

Related

html5: link to the #id of a div at a certain point on the page

I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?
I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.
Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!
I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})
If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.

Make my own custom timeline for a website

I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!
Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.
I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.

Fade out element on hover and allow user to select text underneath - possible?

Consider the following HTML:
<div id="mydiv">Big shiny error goes here</div>
Using below CSS, this div sticks to the top right corner, even if the page is scrolled.
#mydiv {
position:fixed;
right:0;
top:0;
background-color: red;
}
Is it possible to have mydiv fade out to, say, 10% of opacity on hover and allow user to use page elements underneath, such as select text and copy to clipboard? The idea is that mydiv should stay visible at all times, but it should NOT block user's actions.
As an added bonus, it would be nice to select mydiv's text, if no elements are found underneath.
EDIT: hover + z-index approach does not seem to work well, see this jsfiddle.
The closest I can think of is to give the content area a z-index of, say, 1. Then, using :hover, give the error div a lower z-index to position it behind the main area. This will allow mouse events on the main content. You can also adjust opacity to fade it out as needed. I believe that IE will allow you to click/drag/whatever on the element if there's nothing else in front of it, but Chrome and Firefox will consider it hidden by the content area even if there's "nothing" actually there.
$(document).ready(function(){
var id = $('#selector')
id.mouseover(function(){
id.fadeOut(800,function(){
id.hide();
});
})
id.mouseout(function(){
id.fadeIn(800,function(){
});
})
});
selector should point the division on top

print a specific field in an image

i am trying to do it simple and will be happy to see / hear, examples / ideas
for the right approach :
suppose i have an jpg image: width of 780px and height of 2546px
that contains coupons.
my goal is to click on a coupon and print it...
my question is what is the best way to implement it
i thought about image map the will trigger a java script call when ever specific "coupon" is clicked and through the image map specification it would load an image(of the specific) coupon for printing.
i think that maybe there is a better solution..
keep in mind that my only option is one large image that contains coupons for printing.
Wrap your coupon image in a div
<div id="coupon_viewer" onClick="this.style.display='none'">
<img src="coupon.jpg">
</div>
With this CSS
div#coupon_viewer { z-index:100; width:200px; height:300px; overflow:hidden; }
div#coupon_viewer>img { position:relative; left:0px; top:0px; }
When you click on the main coupon, simply display the viewer div and set the left and top properties to the appropriate coordinates for that coupon. You can also set the div width and height as needed. Then window.print().
If your window is initiating the print dialog before rendering the coupon_viewer layer here's how you can delay the print command, long enough for any slow browser to render the coupon layer.
setTimeout(function () { window.print(); }, 800);
After a quick search, here is a thread I found about how you can pull the coordinates when you click on the coupon. You can then multiply the coordinates by whatever factor you reduced the first image size.
jQuery get mouse position within an element
Here is a link to the overflow property spec hidden just means your div will act as a view-port while you move your image around inside it using the left and top properties:
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Good luck
i did it eventually with the use of image maps:
coordinated the 'send to print button' and send to javascript 'print()' method that accept parameter
the parameter is a number of a picture(coupon)
i have a folder that contains all the coupons images:
1.jpg, 2.jpg ..... etc'
the print method retrieve the string (1.jpg)
and then print it.

HTML "overlay" which allows clicks to fall through to elements behind it [duplicate]

This question already has answers here:
HTML/CSS: Make a div "invisible" to clicks?
(5 answers)
Closed 7 years ago.
I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc.
Is there a way to have its content float on top of everything (it's semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?
I've found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other "native" controls never seem to get the clicks in the first place.
A silly hack I did was to set the height of the element to zero but overflow:visible; combining this with pointer-events:none; seems to cover all the bases.
.overlay {
height:0px;
overflow:visible;
pointer-events:none;
background:none !important;
}
Add pointer-events: none; to the overlay.
Original answer: My suggestion would be that you could capture the click event with the overlay, hide the overlay, then refire the click event, then display the overlay again. I'm not sure if you'd get a flicker effect though.
[Update] Exactly this problem and exactly my solution just appeared in this post: "Forwarding Mouse Events Through Layers". I know its probably a little late for the OP, but for the sake of somebody having this problem in the future, I though I would include it.
For the record an alternative approach might be to make the clickable layer the overlay: you make it semi-transparent and then place the "overlay" image behind it (somewhat counterintuitively, the "overlay" image could then be opaque). Depending on what you're trying to do, you might well be able to get the exact same visual effect (of an image and a clickable layer semi-transparently superimposed on top of each other), while avoiding clickability problems (because the "overlay" is in fact in the background).
In case anyone else is running in to the same problem, the only solution I could find that satisfied me was to have the canvas cover everything and then to raise the Z-index of all clickable elements. You can't draw on them, but at least they are clickable...
My team ran into this issue and resolved it very nicely.
add a class "passthrough" or something to each element you want clickable and which is under the overlay.
for each ".passthrough" element append a div and position it exactly on top of its parent. add class "element-overlay" to this new div.
The ".element-overlay" css should have a high z-index (above the page's overlay), and the elements should be transparent.
This should resolve your problem as the events on the ".element-overlay" should bubble up to ".passthrough". If you still have problems (we did not see any so far) you can play around with the binding.
This is an enhancement to #jvenema's solution.
The nice thing about this is that
you don't pass through ALL events to ALL elements. Just the ones you want. (resolved #jvenema's argument)
All events will work properly. (hover for example).
If you have any problems please let me know so I can elaborate.
You can use an overlay with opacity set in order to the buttons/anchors in the back stay visible, but once you have that overlay over an element, you can't click it.
Generally, this isn't a great idea. Taking your scenario, if you had evil intentions, you could hide everything underneath your "overlay". Then, when a user clicks on a link they think should take them to bankofamerica.com, instead it triggers the hidden link which takes them to myevilsite.com.
That said, event bubbling works, and if it's within an application, it's not a big deal. The following code is an example. Clicking the blue area pops up an alert, even though the alert is set on the red area. Note that the orange area does NOT work, because the event will propagate through the PARENT elements, so your overlay needs to be inside whatever element you're observing the clicks on. In your scenario, you may be out of luck.
<html>
<head>
</head>
<body>
<div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')">
<div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
</div>
</div>
<div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
</div>
</body>
</html>
How about this for IE?:
onmousedown: Hide all elements which could overlay the event. Because display:none visibility:hidden not realy works, push the overlaying div out of the screen for a fixed number of pixels. After a delay push back the overlaying div with the same number of pixels.
onmouseup: Meanwhile this is the event you like to fire.
//script
var allclickthrough=[];
function hidedivover(){
if(allclickthrough.length==0){
allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
}
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
}
setTimeout(function(){showdivover()},1000);
}
function showdivover(){
for(var i=0;i<allclickthrough.length;i++){
allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
}
}
//html
<span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
<div onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
I was having this issue when viewing my website on a phone. While I was trying to close the overlay, I was pretty much clicking on anything under the overlay. A solution that I found working for myself is to just add a tag around the entire overlay

Categories