Alternative to frames with CSS? - javascript

I am looking for a way to achieve the layout using CSS or any other method that can accommodate the design and implementation.
The "top" portion is a fixed area. The "left" area will be a list of text links that target to the "main" area. To be more specific, a list of links to profiles will be in the "left" area and I want the associated profile to show in the "main" area.
I can do it with frames, but since it is not the best way or is not supported by HTML5, I want some other alternative for this. Any ideas?

Have a look at this Steve Sanderson blog post:
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

You can do this by setting some of your elements as position: fixed; in CSS. For example make a div for the top and a div for your sidebar, set those for position: fixed; in CSS.
Your main area div is just a normal div which will be scrolled with the normal body.
It's really easy and works on all major browser (excluding some mobile browsers I think).
No need for jQuery or Javascript. You can use things like PHP include for your main area.
Update
You can also make DIVs with fixed sizes and add the attribute overflow: scroll; to get a similar result.

Yes ... you can use jquery and the load() function as I suppose you are using only HTML and not serversidescripting.

You don't need Frames and you don't need any reload or AJAX if you don't like to.
Put all HTML on one page.
Put your head, side and contents in different div containers.
Use style.display = "none" or style.display = "" to steer which link from the left side opens which div in the content area...
Alternatively you can get the content of the profiles using AJAX.
I don't know, if this answer is good enough for you, because I don't know about your JavaScript Knowledge.

Related

Skrollr. change content in fixed div

I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).

How can I position text at a certain height according to another text aside

I'm very new with JS, and I don't even know whether what I try to do is doable. Some guys told me "try javascript", and google can't help me because it's too specific.
Ok so, firstly I have some huge text in the center of my page. So far so good. Call it the "main text"
Then, on the side of the main text, there has to be another column containing more text blocs. But this time, these blocs have to align with the height of specific words found in the main text.
You will probably understand better with this picture :
Any idea how to do that ? thanks !
Use CSS and HTML, there is no need for JavaScript. In CSS you can use top:; to vertically align an element, e.g.
.text {
top: 40%;
}
This will align an element with class "text" 40% of the pages height from the top. Use % as your units to make the text align correctly no matter what size the window is.
You don't need JavaScript to do what you're trying to do. All you need is CSS and html.
First of all you need to take a look at basic html layout here.
Take a look at this Fiddle its something similar to what you need
Guys didn't understand you. It is really hard to find out the x/y position of the word in the div for a lot of reasons. The best way for you is to wrap the needed word with some tag (kind of span or something). Here's a jQuery plugin to do that.
Then seems you will not have troubles to find out the position of your tag for example with jquery position method and to give this position to your left column text.

I am writing a jQuery plugin that will add a parent div to each image on a page.. what CSS issues should I consider?

I'm writing my first jQuery plugin and part of the functionality involves dynamically generating a "frame div" around each image on a page. The frame has to fit "snug" around the image, as it serves as the relative parent of an absolutely positioned overlay image that is dynamically added.
I want this to be unobtrusive obviously. What can I do to minimize the side effects it will have on a user's own CSS? I guess there are certain problem situations that will be unavoidable, right? I'm thinking for ex. if the user CSS has targeted images with..
div.gallery > img
..child selectors to give them border/margin/etc, as one example.
Is it impossible to dynamically generate a parent div of an element in a way that is "safe" on unknown pages? Will there always be a risk of breaking the user CSS?
I suppose I can always just give a warning in the documentation, but I would love to make it idiot-proof if possible.
It just occurred to me that I could use JQ to read any CSS on the contained IMG .. and then transfer any properties "up" to the new parent div. Is this crazy?
In theory you could copy all styles. This answer even shows a plugin to get all computed styles cross-browser. But that would be an overkill, wouldn't it? If you really want to have that, add it as an option (that defaults to false, preferably). Then let the users fix it by styling the class you provide, as Blender suggested in the comments.
You could use the selector .css, or .height or .width to get any dimension properties of the image, and then generate the div based on that.
For example,
thisWidth = $('theImage').width();
thisHeight = $('theImage').height();
$('yourFrame').css({'height':thisHeight,'width':thisWidth});
Hope this is of some help...

How to display modal dialog within the web page?

So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.

Is there a javascript code to locate and highlight a block in a web page corresponding to its dom tree node?

Here I have a dom tree parsed from a html page. I want to select a node in the tree, and highlight its corresponding area in the web page (just like google chrome does, illustrated in the image below). Is there any javascript code to implement this? I tried to wrap the selected tag with a tag, but there are some cases it didn't work. What I need is a general way. Any suggestion would be helpful. Thank you!
I'd probably use a div overlay.
So you'd need to get the node's width, height and offset top and left and then overlay that with a div that has a semi-transparent background-image.
Should be fairly easy to do with jQuery

Categories

Resources