I've got an input that fires a jQuery toggle to switch between content in two different divs... two separate menus in this case.
Because one menu is much longer than the other, I placed that input within an a-tag that scrolls up to the top of container so if the user is at the bottom of the long menu and then switches to the short menu, they're not stuck way at the bottom of the container. One menu is quite long, especially on mobile viewports.
Everything works exactly as intended, but it's throwing an HTML5 validation error because an a-tag can't contain an input.
Any suggestions on keeping the functionality but eliminating the error?
The HTML:
<section id="menu-bin">
<div id="menu-1">
<!-- A Bunch of Menu Content -->
</div>
<div id="menu-1">
<!-- A Bunch of Menu Content -->
</div>
</section>
<div class="button-switches">
<a class="scrolly" href="#menu-bin">
<!-- Forces scroll to top of menu (important for mobile) -->
<input id="menu-switch1" type="button" value="Switch Menus" /></a>
</div>
Related
So I have a parallax scrolling web page you can see it here I would like to be able to have a link my blog which obviously is not on the same page because its not a regular style web page. I have gotten the ribbon/banner to show up on a page that is not like my web page, you can see it here. I'm simply using a div to show it.
<div class="wrapper">
<div class="ribbonw"><div class="ribbon"><a href="google.com">Visit my blog </div>
</div>
</div>
How would I add it to the web page with out screwing up the page. I have done some research on how to make the banner, but I'm not sure how to add it to the page because when ever I do it just either doesn't show up on the page or is just a long white strip on the page.
So to summerize up what I'm asking is how do I add a banner like the one on the second link to my page I would like it to look something like the banner on this page.
To answer the question for future users what I had to do was add the code above into the actual first "slide" or first div. What I mean by that is that in a parallax scrolling page you have your pages split up into divs. So i just had to add my banner into the first div. It looks something like this:
<!-- begin slide 1 -->
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="wrapperr">
<div class="ribbonw">
<div class="ribbon">
Visit my blog
</div>
</div>
</div>
more content here
</div>
<!-- end slide 1 -->
as you can see I just had to add the content into the slide. I had it outside before therefore creating another slide.
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I'm new to html/html5, but not to programming, and i'm trying to code my personal website. I've read many resources and tutorials on the basics but I'm looking for some tips on how to begin achieving the layout I want.
In my layout (here) I'm looking to have the left half of my page as a fixed navigation panel with an image highlighting the current page, then with each option the right side refreshes to a new independently scrolling page and the highlight image animates in the nav panel to the new option.
How should I begin to achieve something like this? I just need a push in the right direction to the type of elements/scripts/whatever I will need to implement.
Thank you!
Here is a simple example to help you start out:
jsFiddle
You'll notice the text on the right slides out of the screen when you scroll but the green box stays in the same position. This is done with a slight bit of CSS.
The navigation div on the left is styled with position: fixed;. This keeps the navigation div in one place at all times.
In contrast, the content div on the right is styled with position: absolute; with a left: 25% set. The widths of the navigation div and content div are set in percentages. This allows the content to take up the same relative screen space whether the window is larger or smaller. Your content will adapt to your viewers resolution.
Using an <iframe> will is one possible solution to altering the content in the right hand content div. Another would be to use ajax but that is getting a little more advanced as you now must understand client and server scripting in order to receive the full benefits from it.
iFrame
Ajax
If you're information is static and will not change often, you could considering making a single page web app with multiple templates that are appended to the content div.
jQuery
jQuery Templates Plugin
jQuery is really good as well for learning JavaScript and makes building dynamic client side applications a breeze.
They also have ajax support as well:
jQuery Ajax
Hope this helps.
Good luck and Happy Coding!
You have the menu housed within an element that is set to position: fixed;
Position fixed will make sure the menu doesn't move around on the page regardless of scrolling the rest.
Then with javascript you can add an event listener for "scroll" on the window (or just the div you want to watch for scrolling). When this fires, check the scrollY property to see what range it is in and maybe highlight certain items in your menu.
Hopefully this leads you down the right path. It's a broad question, so here's a broad answer!
I second the suggestion from #Jeromy French -- I think Bootstrap , Foundation and other responsive frameworks have a lot going for them.
Here's an example using Bootstrap: http://jsfiddle.net/panchroma/2dF6s/
In addition to being HTML5, you can get a layout which works on everything from smartphones to wide desktops. It's not the only way to get a mobile friendly website, but it's one of several good options.
I think that with so much moving towards smartphones and tablets now, the more you can learn about responsive and mobile websites, the better off you will be in the future.
I think all the responsive frameworks use a grid based system, here's what the HTML looks like with Bootstrap:
<div class="container">
<div class="row-fluid" align="center">
<div class="span12">
<h1>Header</h1>
</div><!-- close span12 -->
</div> <!-- close row -->
<div class="row">
<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">
<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->
<div class="span9">
<p>Main Content Here </p>
</div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->
Good luck!
I'm developing Chrome plugin. I would like to implement its interface as line with content that will be displayed before site content starts (similar to stackoverflow information bar). I'm not good at HTML and CSS.
1. How can I implement it to work correclty at any site?
2. What HTML code is best to use to make rectangle that will be correctly displayed at top of any site?
1- Make sure the HTML you inject is right after the Body Tag.
2- With CSS, put it Width 100%; position: fixed (it is always on the top of the browser) or position: absolute (always on the top of page); top:0; z-index: 999 (its always on top)
(Some minor adjustments might be to do, Its off the top of my head)
3- Aim for the first element after your bar (should be a container) and apply it a margin-top of the height of your added element.
Should create a bar on top where you can put any thing you want.
The simplest way to do it is to just add a <div> to the beginning of the body:
<!-- old -->
<body>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
<!-- new -->
<body>
<div>Your content goes here.</div>
<div id="header">
<h1>Hello, world!</h1>
<!-- ... -->
Because the <div> is a block-level element, it should stretch across the screen by default, and then you can style it however you like.
However, there are two basic problems:
The site's CSS interferes with your bar. This could show up in the form of styles that you make sure you declare, so that your bar doesn't look funny. Or it could mean that some elements on the page were positioned absolutely, and you adding the bar breaks the layout.
The site's JS interferes with your bar. If the site itself dynamically adds elements to the beginning of the <body>, then your bar will be pushed down the page. What if the JS selects all the <div>s on the page, and fades them out?
I'm using the simplest HTML 'overflow: scroll' type mark-up for creating a scroll bar within multiple div containers to display text and image content within the scroll. I have it setup within tabbed content areas, that are pulled together calling divs within the tab links. I'm trying to figure how, if possible, that when a user browses to a different tab and then back - to allow that scroll bar to reload to the top, ready to scroll downward again.
Pretty much, the mark-up;
<li class="newtab">
<!--JS Rollover Button for Tab-->
<img src="img/Btns/tab_recordedattack_off1.png" name=tab_recordedattack_off1 border=0>
<!--End JS Rollover Button for Tab-->
</li>
</ul>
<div class="tab_container">
<div id="tab13" class="tab_content">
<div class="tabright">
<div style="border:0px solid black;width:500px;height:400px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">
I've been thinking about trying to set a simple html anchor point at the top of scroll areas and somehow call to it within the tab links - but can't figure out how to do that.
Any suggestions? - How can I point the tabbed links to the content and the anchor point?
You can use jQuery to reset the scroll: http://jsfiddle.net/Cqhch/
$("button").click(function(){
$("div:first").scrollTop(0);
});