This seems like a simple enough question, yet I've spent 3 hours and found no information on how to do it. I purchased Ext JS 4, and I'm trying to get the "Locking Grid" to appear on one of my web pages. The grid will be very simple in the end, with no fancy ajax or anything, just a grid to display some info. I went through their quick start tutorial, and it simply tells you to paste some code into a javascript file, and include a ref to that javascript file in the header of your page.
Well, that does nothing. No grid appears. And why would it, I haven't told the grid where to appear. How do you tell the grid to appear in a particular div on my page, or to appear on my page at all?
Either use the renderTo config or use the render method. Be sure to read the notes for these, specifically that you should not use render/renderTo on items going inside a container, only top level components.
Related
I need to put together a prototype of a scrollable list with items that can be vertically resized. For example, a list of charts. I wish I could post any code but dont even know where to start from. Tried googling but nothing came up.
Any idea what a good starting point might be?
Thanks
Personally I would start with creating a list of elements in a vertical fashion. That should be pretty straight forward.
Second I'd reuse a library which may already have a resizable component that you can use. This should allow you to learn about resizable elements.
http://jqueryui.com/resizable/
Finally, put them together and see where your bugs are!
I'm attempting to rearrange elements on a Volusion store for my employer. The products page we currently have looks like This
I've been tasked with moving the details box
(containing "Nothing says "I'm ready to learn!"), up and to the right, to align with the price box.
The box is a table contained in a hierarchy of nested tables, at roughly the same "depth" in a different branch.
I don't have access to the HTML for the page, only a template html file that generates menus and footers along with the relevant CSS. Some JS exists on the site but since I lack experience with it, I'm hesitant to get into it.
Because of the table-and-div structure, and the fact that I cannot edit the HTML, I'm left with tweaking stylesheets and possibly some javascript. My issue is this: How, using only these tools, can I take an element in one container and reposition it relative to elements in another container? I've tried
Position:Relative;
left:some percentage;
top:some negative percentage;
Which, for a single page, I can get to look quite good, but if I allow others to load the page it falls apart completely, due mostly to the fact that the container for the element I'm moving is calculated based on screen width, and the container for the destination is calculated with the width minus a constant value(the image for the product).
My employer is willing to accept that the arrangement won't be perfect, they know Volusion is the devil complex. But it's important to them that their products display all relevant information "above-the-fold". Obviously I've not found any sort of answers on this. I don't find all that many people who have to edit a webpage without access to the raw code, because that's stupid. Worse still, moving an element to align with a completely different container is just bad policy as I gather, but its what I'm being asked to accomplish.
The only way to do this on Volusion is with javascript. You do not have access to the HTML for the product page and given that it is built with tables there is no way to move the product description area up with CSS.
You need to use javascript to detach and append the product description box below the product details area.
There is no way around it... You need access to the HTML files. You could do it with absolute positioning but that is not good practice.
Because you are working with a template; if you change the arrangement of that page then all of the other product pages will follow. So the reason you can't find the HTML is probably because you are looking for a .php containing html..
I suggest to spend time understanding the template or get a volution expert.
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.