I'm building a portfolio site and have a sliding nav on index.html which contains a group of projects with links leading to other work.html pages once an element is clicked on the nav in the header.
What I want to do is when returning from a work.html page to the index.html page, is auto open the sliding nav automatically.
Thanks a lot if you can help!
document.querySelector(".work").click()
works with opening the sliding nav, but I don't know how to only run this when returning from one of the projects or work.html pages
this is the nav on the index.html and work.html pages
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link work" href=# onclick="openNav();showButton()">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="...">experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="..." rel="noopener noreferrer" target="_blank">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
</ul>
When returning to index.html '.work' will automatically open
Try below.
window.addEventListener('load', (event) => {
if (document.referrer.indexOf('work') > -1) {
//Perform required operation
}
});
document.referrer gives the previous URL.
If you are using React try putting the function in componentDidUpdate(). If you are using only JS no framework, try keeping a list so you know from where the user is coming on to your index page. Use window.location for that. Might not be the best approach, but play with it see what happens
Related
I have a well-known problem of the iPhone users with my current website.
I have two tabs allowing my users to switch between two weeks:
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#currentWeekTab" role="tab" aria-controls="home" aria-selected="true" >
{{{weekInterval 1}}}
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#nextWeekTab" role="tab" aria-controls="profile" aria-selected="false" >
{{{weekInterval 0}}}
</a>
</li>
</ul>
My problem is that my iPhone users need to click twice to actually change the tab. I read that the problem was coming from the hover but no answer fixed my problem.
How can I allow my customers using iPhone to change tab with just one click? Thanks in advance.
You can let Blaze solve your problem by listening to the "click, touchstart" (=tap) event (I am not sure if cordova automatically converts click to tap but I think you will get the point) and force a redraw based on a reactive variable:
First rewrite your ul to not use any bootstrap based events but Blaze helpers:
<ul class="nav nav-tabs justify-content-center" id="myTab">
<li class="nav-item">
<a class="nav-link week-tab-link {{#if active 'currentWeek'}}active{{/if}}"
id="home-tab"
data-state="currentWeek"
href="#currentWeekTab"
aria-controls="home" aria-selected="{{active 'currentWeek'}}">
1
</a>
</li>
<li class="nav-item">
<a class="nav-link week-tab-link {{#if active 'nextWeek'}}active{{/if}}"
id="profile-tab"
data-state="nextWeek"
href="#nextWeekTab"
aria-controls="profile" aria-selected="{{active 'nextWeek'}}">
2
</a>
</li>
</ul>
{{#if active 'currentWeek'}}
<p>render current week</p>
{{/if}}
{{#if active 'nextWeek'}}
<p>render next week</p>
{{/if}}
As you can see the template relies on some state to determine a) which tab is active and b) which content to render.
To resolve this active state a helper is required:
Template.myTemplate.helpers({
active (tabName) {
return Template.instance().state.get('active') === tabName
}
})
There also needs to be a default state to be set in order to determine what to render when the page is loaded:
Template.myTemplate.onCreated(function helloOnCreated () {
const instance = this
instance.state = new ReactiveDict(0)
instance.state.set('active', 'currentWeek')
})
In order to save lines of code (=less possible errors) you can create an event map for a common class selector .week-tab-link which triggers an event callback if any of the tab is clicked. In this callback you can "read" the data-state attribute from the tab in order to set the active state:
Template.myTemplate.events({
'click, touchstart .week-tab-link' (event, templateInstance) {
// event.preventDefault() // uncomment this to prevent href update
const $target = templateInstance.$(event.currentTarget)
const activeState = $target.data('state')
templateInstance.state.set('active', activeState)
}
})
Note, that this uses ReactiveDict but you can also implement this using ReactiveVar.
Related:
Touch events in Meteor
I have bootstrap Sidebar menu in my admin panel, when I click and fetch a link then two items are active, like in the picture, why?
Check the li tag to see if the tag contains active option in distributor's package page. You need active on current page only & not on distrubutor's page when you are on dp page
Adding more to that answer,
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Keeping a list item 'active' would mean, that item would be always selected. Check the list item class for this.
I am editing a template and links don't respond to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I will only post the menu section of the index file since the webpage is too long. Please download the template from the following link to see it yourselfClick Here
I am new here so I don't clearly understand the rules of posting a question. let me know if you need other info and please help me out.
`
<nav class="navbar navbar-light">
<ul class="nav navbar-nav single-page-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <!-- <span class="sr-only">(current)</span> --></a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Products</a>
</li> <!-- this link won't work -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>`.
<div class="sigma-content col-lg-6 col-md-6 photo text-center" >
<h2></h2>
VISIT OUR GALLERY
</div>
EDIT: I just learned about browser console and the error is
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
at bootstrap.min.js:7
at bootstrap.min.js:7
at bootstrap.min.js:7
How do I fix this.
A quick inspection of the live demo of the linked template shows, at the bottom of the source (the frame source, not the page source) this code
// The actual plugin
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
which looks like it's using this library which states
Clicking on any links within the container will cause an animated scroll down to the element whose ID is identified by that link's "hash" (if it exists)
and then in the options
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
So, since the code on the live demo has filter: ':not(.external)', and I assume you have that on your page as well (and since your <ul> has the single-page-nav class) changing
<a class="nav-link" href="gallery.html">Products</a>
to
<a class="nav-link external" href="gallery.html">Products</a>
should fix your problem
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I'm very new to the whole web development scene, so what I'm asking may be blisteringly obvious. For an english assessment, I have to create and host a webpage, of a particular text (in my case, I've chosen the Hitchhikers Guide to the Galaxy). Now in the assessment, it is outlined that we are allowed to use code from other websites as a template for our own website, so I do stress, this is not my code. I got the code from 'http://dayzepoch.com/'. So far, I have placeholder information, and customised the webpage, to my needs. Currently, the webpage is hosted at 'http://hiimstring3.hpage.com/' on 'hPage'. Now, my page loads just fine, but when I click on one of the links, it stays on that page for a few seconds, but then loads the original DayZ Epoch website. I believe this is something to do with the below section of code under body:
<ul class="nav nav-tabs" id="myTab">
<li class="active"> Home </li>
<li class=""> Characters </li>
<li class=""> Places </li>
<li class=""> Ships </li>
<li class=""> About </li>
</ul>
Now, I don't know how to change this, so that my website has the same functionality as the original website, but using my url, instead of these ones. If someone could help me out, then I would really appreciate it.
-Michael
Assuming you are http://jqueryui.com/tabs/ then the href you not be including the url of another website.
it should be of the format
<ul class="nav nav-tabs" id="myTab">
<li class="active"> Home </li>
<li class=""> Characters </li>
<li class=""> Places </li>
<li class=""> Ships </li>
<li class=""> About </li>
</ul>