I've got a basic webpage that I built with HTML/CSS here.
However there's a few things I want to change in order to make it easier to update.
The first thing I want to do is to find a way to automate certain elements so that if I change them I don't have to go back and change it on every single page. For instance, if I add twitter to the nav on the left-column, I just want to change it once and have it universally applied across the site.
This also goes for the footer, and the share button JavaScript element that I have in the head section. (For the share buttons that appear on the left side.)
Would this be done with JavaScript? If so how?
I know how to link JavaScript files like a CSS file, but that's as far as my knowledge goes. (Besides knowing HTML, CSS and Java of course.)
Related
i want to create some kind of widget/badge that will be included on several websites. It will not be placed inside the page, it shall be shown as overlay on top of the website at a defined position (like on center rightside, bottom left).
You might know those kind of widgets from TrustedShops.
How can i ensure that this included widget always looks same? No matter which css/javascript is active on the website that includes the widget?
Somebody already have experiences which those stuff? Any pitfalls/ideas?
Can i somehow define a css sandbox (like with a iframe?) Or do i need to set all possible values also to their defaults to ensure that including page might not change it?!
One other thought of mine: It could be imported as image. Then you ensure that layout is static, but its somehow hardcoded. The external website creates a dynamic image (via PHP) and this is just shown on including website, but then no interaction is possible ... :(
BR
Marius
I am new to web design so I wanted to learn more by looking at other websites and using their techniques. Now I am currently using blogger platform and wanted to copy an entire gadget from another blog http://gmailblog.blogspot.com/. I am trying to copy the right floating sidebar gadget to by blog.
To do so, I think I will have to copy the CSS codes, html codes and javascript if it is used. Is there a simple way to find all those codes and copy those to mine? I did try using the inspect element function of google chrome but was unsuccessful.
Any help?
Inspection elements are probably your best way to go, but a decent grasp of CSS and HTML would be required to get you started on that. Toggling styles on and off to see what happens is a good way to start poking into existing solutions.
When it comes to JavaScript parts of a feature, the inspection tools will probably not get you all that far.
For deeper introspection, you could always save a local copy of the entire webpage, remove bits and pieces, and see at which points the feature breaks; keep the things that seem to be required, and continue until you seem to have stripped the site down to the bare minimum to keep your feature working. From there you can move on to see if you can understand what the different parts of the remaining code does.
For your specific gadget, some key aspects include:
#gadget-dock has the style position: fixed that keeps the element's position in place as the user scrolls up and down the page.
#gadget-dock has the style right: -40px which keeps the element all but out of sight, by default.
#gadget-dock:hover has the style right: 0 which overrides the aforementioned style and moves the element into sight when hovered.
#gadget-dock also have a lot of CSS3 transitions that define the sliding motions that appear when changing from one position to another (i.e. when the value for right is changed).
What is the best way or an easy way to create a javascript menu. When I say best, I mean there are many softwares that help in creating menus, for eg. Sothink DHTML menu. Isnt there a menu control available in javascript?
There is no reason to buy or even just install a program solely for the purpose of constructing a JavaScript menu.
First of all, the menu itself should not contain any JavaScript code. It should just be a nested list. You shouldn't need a program to write that code for you. If you do, then you're probably using a WYSIWYG editor anyways, and any WYSIWYG HTML editor will create an unordered list for you.
Once you've created the menu structure, you just need to add the display style and behavior to make it look/behave like a dropdown or flyout menu. This can be done either in pure CSS or with CSS + JavaScript. Some people prefer to use JavaScript to turn a regular list into a dropdown/flyout menu because they think using display: none is bad for SEO, and if you style items like that to begin with, then people without JavaScript will not be able to see the hidden menu items. However, there are ways around both of those problems using pure CSS.
If you're using jQuery, then there are a number of jQuery plugins that let you create your menus with just 1-2 lines of code. Otherwise, there are standalone scripts and that can do the same.
https://stackoverflow.com/questions/4177888/what-is-the-best-way-to-create-javascript-menu-closed
You just asked this question a couple of minutes ago?
Here is JQuery cool menus that you can reference.Anyway Javascript is client side script language.There is no control at all.
I would like to have a link on my site that when you click it a site segment that hovers above the content appears and displays some information until it is closed in some way, and I would like to be able to insert anything I want to in there- text, images, CSS formatting, etc.
What language should I use for this? Do you know any sites that do this? Also a link to relevant libraries would be appreciated.
javascript is used for such client side tasks such as this. The library jquery will be imensensly helpful. Basically what happens is when you hover your mouse over an image (or whatever you like) a div gets its display property switched and is positioned at the appropriate coordinates. Since this is a div, you can insert into it anything you would have in a webpage, images, CSS, flash, or whatever you like.
If I understand well the requirements, you need to use JavaScript, <div>s and the CSS property "display".
Check out Prototype Window Xilinus. They have exactly you're looking for.
I want to have multiple video icons at the top my website's front page. I will have about 20 or so which won't fit on one line (I want to keep the videos on one like) so I thought of having two button on the right of the group and on the left of the group where you click to scroll and view more videos. Do you know an easy way to do this? I can pass in the video links from the server in different Divs or anyway that will make it easy. I thought of using AJAX and pass it different set every time from the server with every click (I'm using Rails and it's fairly easy to do it) but that will be an extra load on the server which I'm trying to avoid. I'd rather send all the icons at once and let the JavaScript handle the scrolling.
I thought of using iFrame but I don't like the idea of scrollbar and wanted to be more like button
Any ideas?
Thanks,
Tam
Use a JavaScript library like jQuery. There is myriad of plugins that do exactly what you want. Here is one