I have a mdl-layout__tab-bar with a few links in the navigation bar. I want these links to trigger a page scroll to sections of the page.
I have tried the following solutions:
# the targeted section starts with the <a name="myTargetedSection" id="myTargetedSection"></a> tag
<div class="mdl-layout__tab-bar">
My link
...
</div>
This does not work and neither does
<div class="mdl-layout__tab-bar">
My link
...
</div>
It seems that mdl-layout__tab links work only with mdl-layout__tab-panel elements. The (unsatisfying) solution I found was to use regular mdl-navigation__link links, but these have no bottom-border, and cannot be horizontaly browsed on small screens.
Any idea? Thank you!
Resolved: the following code works
<div class="mdl-layout__tab-bar">
My link
</div>
Related
I am trying to create a div with a fixed left section & scrollable right section and other divs below them. I went through many blog posts and I am not able to figure out, how to create this particular page in react JS using Tailwind CSS.
I am using react JS & Tailwind CSS.
I have added the structure of my page and also added a similar page for reference.
Structure of my page :
<div className="mainDiv">
<div className="rowDiv">
<div className="staticDiv">
<ProductImages
images={productData.mediaUrls}
/>
</div>
<div className="scrollableDiv">
<ProductInfo
productData={productData}
/>
</div>
</div>
<div className="relatedProductsDiv">
<RelatedProducts
sectionHeading="Related products"
/>
</div>
<div className="recentlyViewedProductsDiv">
<RecentlyViewedProducts
sectionHeading="Recently viewed products"
/>
</div>
</div>
Similar page: Click here to view a similar page
div with className staticDiv should scroll only after scrollableDiv
completes its full scroll.
once scrollableDiv finishes its full scroll, both the divs (staticDiv and scrollableDiv) should scroll normally to show relatedProductsDiv and recentlyViewedProductsDiv.
Please click here to view a similar page to get my question in more detail.
I am trying to create a page similar to the one in the link.
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
Is it possible using pjax to do something like "Reload everything in body except footer and header"?
I've tried go But it is not working (footer and header disappears).
This is not the suggestive way of using a PJAX Call
When you wanted to refresh a division, you must provide a valid identifier.
Header and Footer elements are part of body, there is nothing called leaving out for header and footer.
Alternatively, define a #id to your division to refresh
<body>
<header>
</header>
<div id="pjax-container">
</div>
<footer>
</footer>
</body>
Now provide a link like
<a href="/home" data-pjax="#pjax-container">
I believe this could be found over the PJAX Documentation.
So, after looking at many jquery modal plugins, I like the PopEasy ( http://thomasgrauer.com/popeasy/ ), but I copy and paste the provided code into a page on my server and no-workey.
Do the same with jsFiddle, same problem. The overlay fires, but the modal doesn't pop up. I'm sure that I'm doing one simple thing wrong.
http://jsfiddle.net/birchy/Kkw2L/5/
<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
Close Me
content here
</div>
It appears to be a missing anchor close tag in the author's code.
Hello I have created a website for my school work and I am trying to implement a navigation bar for all the pages of the site. I got it working on all my other pages but there is one page in particular where it the entire navigation bar disappears when the page is loaded. The header section should display the navigation bar while the body loads the prime number table.The page should have a navbar like this.
However the prime number table page will not load the home and back icons.
I cant get the stackoverflow formatter to accept my html code so I have to put a link to it, sorry!.
This is the source code
Headers should not be in the <head> element; instead, they should be at the top of the <body> element. So move this code:
<div class="header">
<div class="container">
<div class="navbar">
<a class="logo" href="http://w3.cnm.edu/~tteichelmann"></a>
<a class="back" href="http://w3.cnm.edu/~tteichelmann/cis1210" onclick="history.back();" value="Back"></a>
</div>
</div>
</div>
Into the body. Also, HTML 5 introduced the <header> element (more here), which is a more syntactical way of defining a header... Consider that an alternative, not a requirement.
Move your div with the class of header outside of the head section of the document. It should be within the body tags.