So I have a custom css drop down menu and it works fine except I realized that writing this menu out across all the html pages on this website will become tedious if I should update with a new section to the website and need to add on a new tier to the menu, I would end up with a billion htmls to update one simple line of code.
I was wondering, is there a way to write this menu once (on the main page) and call on it on all my other htmls?
I experimented a bit with Objects, Iframe, to call on the dropdown menu written on a separate html file and such but when the menu expands you get scroll bars and both methods seem to embed into the page. I want the contents of the page to be behind the drop down menu just as it standardly looks right now.
The following is my unedited page:
http://www.blue-cicada.net/trivial/index.html
And this is my test:
http://www.blue-cicada.net/trivial/test/
Not looking so good there, my top image is obscured, the submenus wont fly out completely etc, how to fix?
Im really new to this stuff so any help is appreciated.
You want to do something server side really, back in the day this would have been http://en.wikipedia.org/wiki/Server_Side_Includes, depending on who is hosting your site it may even still be, though that's fairly unlikely. Chances are you have some provision from your webhost to do something server side, ie PHP Includes say.
If not you could look at doing JavaScript client side includes but its crufty,
If you're really just hand editing you html files and have no access to any server side technologies well, you can always just have a text editor that can search and replace across multiple files
UPDATE
Given your comments I would just download something like Notepad++ and read the Bulk Find and Replace here 'http://www.dedoimedo.com/computers/notepadpp-tricks.html'. Basically you can have a test page you use for figuring out 'what you want to do' and then use the global find and replace to update all of the 'current' versions of the header/menu/whatever to you new version.
Backup all you files first!
Write it in a page called A.html.
On every page where you want to put it, use an <iframe src="A.html">
Make sure you remove the borders of the <iframe>, and also the scrollbars and make it look natural
Related
I have a web site of more than 20 pages, all using the same dropdown menu. Currently, each page contains redundant HTML code for the menu, so if I want to change one thing in a menu, I have to change it for all the pages. I am using plain html/css and some javascript for my site. Is there a way to have my dropdown menu all in one file and include the reference to that file for all 20 pages?
I tried using the <embed> element to include the menu, but it did not work out for me since I cannot adequately align it as it leaves a large empty area right below it to allow for dropdown options. Not sure what is the best way to handle that
As suggested by Quetin Veron in the comment, PHP include statements are the best way to deal with it.
However, in case you're not interested in writing backend code, you can do that using JavaScript by parsing a json or an ini file/text in your script and converting it into the required links on the menu.
[Do note that you'll still have to use JavaScript for that]
If you'd not even prefer to use JS (Not recommended), you can use an iframe as the navigation menu
When you do that, add <base target="_parent"> in the head section of your iframe.
And then, in all other pages, add <iframe src="menu.html"></iframe> and replace menu.html with the path to the menu.
I hope this helps. However, please note that this just is a workaround if you wish to use frontend technologies only.
Otherwise use <?php include "menu.php";?> for PHP or for Node with EJS, use <%include "menu.ejs";%>
As a favor for a friend, I'm trying to add a quick Valentine's Ad for an article that is supposed to be appended to the top of their existing site starting... tomorrow. They have an existing site made by somebody they are no longer in contact with back in 2010 built with Drupal.
I don't know Drupal. The only information I have is a HostGator login that I'm currently using to send a backup zip to my email.
HostGator's File menu doesn't even show search results for the text I'm searching for on the main page where I'd put this.
I have no idea what I'm doing, basically. I'm comfortable as a web developer in general and figured "yeah I can add a thing to the top of your pages, sure." I can write that HTML quickly, but everything else... do I need Drupal installed, etc, and will that run with the backup that HostGator is gonna send me?
Any advice? I realize I'm an idiot for signing up for a favor like this last minute.
Ultimately I just need to add some pictures and some text.
Easiest way to achieve this would be creating custom block. Not sure what version of Drupal you use, but let's assume it's D7 (similar for other versions):
Go to Structure -> Blocks -> Add block
Enter your static content into "Block body" field. Change that field format to "full html" so drupal won't filter out some of your tags.
If you don't want Drupal's block title to appear in Block title field enter < none > (without space signs in between! - SO can't show it without spaces).
Save your block
Now go to Structure -> Blocks...your block should be visible in block list. You can find and edit it from there.
Theme site uses has "Regions" (something like sidebars). If want your block to appear with main content find your block and select "Content" region. Or any other you want.
At top of that page should be a link "Demonstrate block regions" - click it to see which region is where..
After selecting region you can click "configure" link for your block to precise in what conditions block should appear on page. Click it.
Scroll down and in right sidebar at bottom of configure page you'll see "Pages", "Content types"... it for selecting on what pages, on what content types...your block should be visible. Default is everywhere, so if you need this - use it.
Save block. If you didn't save on Structure -> Block after selecting region select region again and Save.
You can embed your CSS there, but you can also go to (usually): /sites/all/themes/your_theme/styles/style.css or something like that.
If you can't find CSS turn the caching off for a moment: Configuration -> Development -> Performance and inspect location of loaded CSS file(s) (use browser inspection tool).
Good luck!
I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.
I've got a simple basic .html document that I'm using for a "My Links.html" local, offline page to use as a way to store hyperlinks to other websites I find interesting. It's kind of like a portable "bookmark" page on the go. Here's some sample code that I've created already:
<b><h3>Web Design Resources</h3></b>
<hr />
<br />
<b><h4><u>CSS Tutorials</u></h4></b>
Line25.com
<ul>
Tutorials
- main tutorials page<br />
Pure CSS Dropdown
- Creating a dropdown menu solely out of css, nothing else (includes sub menus that slide out to the right) <br />
Trendy flat-style-css-menu
- how to create a trendy flat style css menu (hover over "menu image" puts menu title to the right of the images)<br />
Slick Features Comparison Table
- a ghosted (semi transparent) table that vertically compares three items with the categories on the left, box highlight on category font when hovering over any of the text in that row<br />
Simple Collapsing Header Effect
- fixed horizontal menu on top with header text/image that is hidden when scrolling down the page, replaced with the content
Currently I'm manually opening the html document and editing it to add each new link, description and categories (as they come up).
What I'm looking to do is add some simple forms and a submit button to update this offline .html document. I'd like to keep everything contained in the one single document for ease of moving around.
Ideally it'd add text using this format: "hyperlink - description"
With a dropdown of existing categories so that it adds to the correct section. Just a couple text boxes, a dropdown box, and a submit link or button. Nothing fancy, just the bare bones to "get the job done".
Thanks everyone, even if ya can just point me in the right direction or let me know the element names so I can more effectively research what I'm looking to do.
I don't think this will be possible with pure HTML.
You can alter the HTML with Javascript (jQuery) on the client side, but you won't be able to save the changes to your local file system trough Javascript. You can always save the altered document manually if that is an option, but it doesn't seem ideal to me.
For a more solid solution you would need some server side scripting like PHP, and a webserver like Apache running on your local machine (like XAMP or MAMP). And ideally you would need to work with some sort of database or XML file to store the data. Technically it is possible to just alter the HTML but it would be strange and highly uncommon. The XML file will be the easiest for portability, the database will be better for performance (and probably a more useful exercise).
Not sure if this is the best way to handle you 'problem' though. Why not just work with an existing service like Xmarks. You will have access to your bookmarks directly from your browser, can sync them between various machines / browsers, or can access them through their website.
If you are just trying to learn something new however, I encourage the effort. Feel free to ask for any more specific pointers once you decided which route you want to take...
I'm not sure if I am using the proper term when I refer to "dynamically. *
I want to have a simple, one level, menu displayed on all 80 pages of my site. The menu items will change periodically - new items added, some removed, etc... What is the best way to create this menu so I don't have to update all 80 pages? FYI: I'm not too knowledgeable in all the scripting languages. Thank you.**
The simplest way is to use PHP.
Name all your files so they end in php instead of html, and make a file called menu.php.
Copy your menu into menu.php, then no your other pages where you want the menu, type:
<? include("menu.php"); ?>
and the menu will appear like magic!
I would also suggest SSI, but they are often disabled on shared hosting in my experience.
Create a master page if your working in any one of the "major" web frameworks. You put a lonely HTML tag up there so I'm not sure if this NEEDS to be purely HTML and nothing else.