<ul style="font-family:'Ralway', Serif;" class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>EVENTS</li>
<li>SURRENDER STORIES</li>
<li><a href="http://www.reachoutcelebration.com/#globalstrategy" >GLOBAL STRATEGY</a></li>
<li>CONTACT</li>
<li>DONATE</li>
</ul>
I want to click on "donate" or "contact" links that are from the reachoutcelebration.com/tommy-barnett page and go to the "donate" or "contact" section of this webpage: http://www.reachoutcelebration.com. PLEASE ONLY CLICK THE CONTACT AND DONATE BUTTONS. I have verified they do not work. Clicking donate and contact it seemed to throw me in the middle of the http://www.reachoutcelebration.com site no matter where I but the anchor tags or the id attributes. The above code is revised.
The code on the reachoutcelebration.com page reads as follows:
<!-- Section Header -->
<div class="section-header container-fluid"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
I already tried Expression Engine Stack over flow:
https://expressionengine.stackexchange.com/questions/38480/expression-engine-and-anchor-tags/38481#38481
Any ideas as to why it not working?
I think all you have to do is match names and URL's for <a name="donate"></a> and <a name="contact"></a> respectively:
<li>CONTACT</li>
<li>DONATE</li>
After much stress and tinkering, the anchors work, but I have to put them in ackward positions at the bottom of the viewport to "kinda" "sorta" go where I want them to go. It works, but it's cumbersome. Not sure what else to do here. guess we can close this.
FYI, the anchor tags I used just have the name in it, hence <a name="donate"> or <a name="contactus">
Add id attr to the div and test and it should work. I saw that anchor tag for donate has the href pointing to #donate but I think there's no div or section on the page with id donate.
<!-- donate id added to this div -->
<div class="section-header container-fluid" id="donate"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
Related
I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.
<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>
i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE
I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});
Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".
Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">
I just got started with materialize
I have create side bar,which should remain open by default, and when clicked on menu button it should be able to display/hidden.
Jsfiddle : https://jsfiddle.net/karimkhan/5hrpcp1j/16/
Currently issue are:
Page content gets disabled when side bar opens on click on menu button
In menu, title, first line, second line text does not appear
some extra div content appears above copyright footer.
I appreciate if someone can help me to improve this appearance.
html:
<body>
<main>
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Components</li>
<li>Javascript</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
</body>
Let me answer your questions:
1) This is the default behavior of the sidenav plugin.
2) The default color for the nav text is white. Set a nav { color: #000 } rule and it will work
3) You have to remove the padding of your footer footer.page-footer { padding-top: 0px; }
It's all CSS and devtools!
Here is a working jsfiddle
Note: For your last comment, for some reason sometimes, it creates two overlays and as a result removes only one. Check it in your environment for better debugging.
Update: I think the multiple overlays is a bug that haven't been fixed. Take a look a this
im losing it here. I working on this site and the menu link to differents anchors.. If im on another page the anchor link work properly but if im in the same page (home) do not work more than once.
I double check the urls and i think they are ok.
The live url is greencleansteamwash.com
The anchor links are Benefits, Services and Appointments
My code is something like this
<section id="benefits">
Content of benefits
</section>
<section id="plans">
Content of plans
</section>
<div id="book">
Content of booking
</section>
<ul class="nav-offcanvas">
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
</ul>
Delete the whole URL from the links, just leave the # part.
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.