Maybe not the best title, but I didn't know how to name it.
Navigation contains:
Who are we?
What we do?
Our team
Services
Contact
<ul class="list-unstyled h-100">
<li>
Ko smo mi?
</li>
<li>
Čime se bavimo?
</li>
<li>
Naš tim
</li>
<li>
Usluge
</li>
<li>
Kontakt
</li>
Numbers 1, 2 and 3 belong to view About, and as you can see, Services and Contact are Separated views.
I have jQuery code that controls smooth scroll between anchors
$('a[href^="#"]').on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 600, function () {
window.location.hash = hash;
});
}
});
And everything works just fine until user goes to Services or Contact view. After that, he can't come back to any of this anchors, which is normal, because links not pointing to controller. If I put /page/about/ in front of every anchor, then I don't have smooth scroll in about page, it loads every time from beginning.
Question is, is there any solution to solve this, to have anchors in nav and landing page, and other views?
Here is the link to the website, so if you don't understand me, you can try by yourself. Btw, don't click on contact, there is no view for that yet, and services is empty view, so don't be confused with style.
https://test.cherrydevelop.com
P.S. If anyone have better name for topic, you are welcome!
Related
I wanna render show template into index template right after clicked element.
Some code(jade):
template(name="index")
ul
for post in posts
li
a(href="posts/1")= post.title
// render full post #1 here if link clicked
li
a(href="posts/2")= post.title
// render full post #2 here if link clicked
li
a(href="posts/3")= post.title
// render full post #3 here if link clicked
So I don't need to replace whole index template when user clicks show post link. I just need render show template right after link to this post.
Also I need to show only one post at same time, so if user clicks one post, then another, first one should be removed from DOM and second one should be rendered just in his place (right after show link).
How can I do that with meteor and Iron Router?
See Blaze.render or Blaze.renderWithData
Insert placeholders into your markup:
template(name="index")
ul
for post in posts
li
a(href="posts/1")= post.title
div(id="post1") // render full post #1 here if link clicked
li
a(href="posts/2")= post.title
div(id="post2") // render full post #2 here if link clicked
li
a(href="posts/3")= post.title
div(id="post3") // render full post #3 here if link clicked
Then setup your helpers:
Template.index.helpers({
'click a': function(ev){
... determine which link was clicked on
... pick the node to inject ex:
var node = $('#post2');
Blaze.render('postTemplate',node);
}
});
One way to do this would be to go ahead and render everything, but keep it hidden. Then you can add a click event handler that hides everything and shows only the thing that was clicked:
<template name='index'>
<ul>
{{#each posts}}
<li>
<a href='#' class='show-index-link' _id="{{_id}}"><!--Store _id so we can retrieve it in event handler-->
<div class='post-show-hide' id='post-show-hide-{{_id}}' style='display: none;'><!-- make it easy to select in the event handler-->
{{> post}}<!-- data context is the post in question -->
</div>
</li>
{{/each}}
</ul>
</template>
Then your event handler might look something like this:
Template.index.events({
'click .show-index-link': function(event) {
var _id = $(event.currentTarget).attr('_id'); // grab the ID of the post to show
event.preventDefault();
$('.post-show-hide').hide(); // hide all of them
$('#post-show-hide-' + _id).show(); // Show only the one we just clicked on
}
});
This seems the most straightforward way to accomplish this to me, but if you're concerned about the performance of sending all of the posts to the client, you could also consider having an event handler that subscribes to the post in question. That seems significantly more difficult (and if you're really worried about that sort of performance issue, you can get around it much more easily, e.g. with pagination), so unless you really need it, I'd stick to something simple like the solution above.
<li>#Html.ActionLink("Contact Us", "Contact", "Home")</li>
<li>Services
<ul>
<li>#Html.ActionLink("IT", "IT", "Home")
<ul>//Dropdown
<li>#Html.ActionLink("Data Backup", "DataBackup", "Home")</li>
</ul>
</li>
For example this is my menu my css class is "selected" for active link.. I want to use it at the easiest way. Can any one help me for MVC4.. I have looked some solutions but don't have much knowledge to use it..
<ul class="#{booleanForThisIsSelected ? "selected" : "";}">//Dropdown
I use the following technique all the time, using jQuery
<script type="text/javascript">
var currentLocation = window.location;
$(function () {
$('.menu li a').each(function () {
if (this.href == currentLocation) {
$(this).parent().addClass("current");
}
});
});
</script>
This block at first gets the current page url, then it gets all the menu anchors and compares each one with the current page url, once it finds a match, it gives the matching anchor a special class current which should indicate the current page link.
Please note that the selector $('.menu li a') should be changes to match your own structure so it can get the menu items correctly.
Hope this helps, let me know if you need anything else.
I would recommend you to use MvcSiteMapProvider MVC4.
You install the nuget package.
Then you add links according to your site structure to the Mvc.Sitemap-file.
Now you should be able to use the MenuHelperModel.cshtml-file to define the rendering behaviour of all links in your sitemap (including currently selected ones), an example of this could look like this:
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
#foreach (var node in Model.Nodes) {
string classes = node.IsCurrentNode | node.IsInCurrentPath | node.Children.Any(n => n.IsCurrentNode)
? "selected" : "";
<li class="#classes">#Html.DisplayFor(m => node)
#if (node.Children.Any()) {
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
All you have to do now is ensure your links show up on your page, best location to put it should be your Layout-/Master-Page.
There you could for example add a call to
#Html.MvcSiteMap("MvcSiteMapProvider").Menu(0, true, false, 1)
Which renders only the first level of your sitemap.
If you want a more verbose example using this you can take a look at my question here.
But keep in mind that uses the now obsolete MvcSiteMapProvider-Package, so there is a slight syntax change inside MenuHelperModel.cshtml.
I work on a Visual Studio 2012 MVC4 Project with the Durandal template. In this template, the shell.js page gives us a quite simple menu solution where every elements are located on top. Personally I need something different. For that purpose, I have a javascript file named dropdown.js which allows me to show/hide sub menus. It works pretty well in a standard project but I was not able to do it working with the durandal template.
Here is what I try:
I added a reference to the dropdown.js script in the Index.chtml:
<script src="~/Scripts/dropdown.js"></script>
Then in the shell.html page, I would like to use it like this:
<li class="dropdown" data-role="dropdown">
...
...
</li>
Here is a little portion of the dropdown.js:
$(function () {
alert('XXXX');
$('[data-role="dropdown"]').each(function () {
alert('YYYY');
$(this).Dropdown();
})
})
As you can see, each element decorated with the 'dropdown' class should have been catched. It doesn't work with durandal. I placed some alert boxes to check it. The alert 'XX' is showed but the alert 'YY' is never showed.
I searched a bunch of hours without success.
Any idea?
Check out the life cycle events tha tyou can tap into for Durandal here
viewAttached may help since you can tap into when the view and dom are ready.
I think the problem is that when the dropdown.js function is executed before the menu renders and because of that the jquery selector doesn't catch any list item.
I think that your best option is to make a knockout binding to transform your list items in dropdowns.
The binding would look something like:
ko.bindingHandlers.dropdown= {
init: function (element, valueAccessor, allBindingsAccessor) {
$(element).Dropdown();
},
update: function (element, valueAccessor) {
}
};
And in the view:
<li class="dropdown" data-bind="dropdown : {}">
...
...
</li>
Currently I have a Wordpress website that uses Isotope to display all posts in a grid and there is a fixed navigation that is used for filtering the post categories.
I am trying to add some Javascript or Jquery to scroll to the top of the page when a navigation item is clicked - so it filters the category and also scrolls to the top of the page.
I have been trying different examples for a while and cannot figure it out.
I was hoping someone might be able to point me in the right direction.
Currently my navigation looks like this:
<div class="menuContainer right">
<ul id="options" class="option-set">
<li>Editorial</li>
<li> </li>
<li>Covers</li>
<li> </li>
<li>Advertising</li>
<li> </li>
<li>Film</li>
</ul>
</div>`
and the current js.
<script type="text/javascript">
jQuery(document).ready(function(){
var mycontainer = jQuery('#isocontent');
mycontainer.isotope({
itemSelector: '.postContainer',
});
// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});
// set selected menu items
var $optionSets = $('.option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
</script>
All help would be greatly appreciated.
Thank you!
Ok, seeing is believing :) easier to understand what you want. Basically, all you have to do is to hook up what I commented before on your Editorial, Covers, Advertising, Film links. Since you use Isotope with filtering, you have assigned click functions to your links already...
// stuff
<ul id="filters">
<li>Show all, home, whatever</li>
<li>Editorial</li>
<li>Covers</li>
<li>Advertising</li>
<li>Film</li>
</ul>
// more stuff
$('#filters a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
$('body,html').animate({ // always scrolls to the top when filter link is clicked
scrollTop: 0
}, 800);
return false;
});
// even more stuff
what is the css of current link like when somebody goes to ABOUT US page then about us color changed to red.... then going to CONTACT US page then about us color change to default and CONTACT US color change to red....
please help i am new designer......
use :hover in css
replace li in example with whatever element you use in your actual code
eg.
li:hover{backgroundcolor:Red;}
li tag in case you design menu like
<ul>
<li> Menu1</li>
<li> Menu2</li>
</ul>
Whwn you click on specific menu, that perticular page will be open.
then just do simple thing,
write class for active.
apply this, for home page
for About Us page active class attribute to About Us li
<ul>
<li class="active">Home</li>
<li>Projects</li>
<li>About Us</li>
</ul>
You can't use JUST CSS to determine which page your user currently is - it just won't do it. You have to adjust your markup to add a hook of some kind that your CSS can use. Like so -
<ul id="nav">
<li>About Us</li>
<li>Contact</li>
</ul>
If you're building a static HTML site, you can manually change the HTML on each page to reflect the current page in the menu.
If you're building something more complex, you will probably need to rely on PHP or JavaScript to figure out the current page. This script is a little old (it's from Jeremy Keith's "DOM Scripting"), but it will do the job:
function highlightPage(id){
//make sure DOM methods are understood
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(id)) return false;
var nav = document.getElementById(id);
var links = nav.getElementsByTagName('a');
for (var i=0; i < links.length; i++){
var linkurl = links[i].getAttribute('href');
var currenturl = window.location.href;
//indexOf will return -1 on non-matches, so we're checking for a positive match
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
addLoadEvent(function(){
highlightPage('nav');
});
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
This script would go in an externally linked javascript file.
Give the body an id name <body id="about-us">. Your link needs an id, too <a href="#" id='this-link">. Then:
#about-us #this-link {
color:red;
}
#contact-us #this-link {
}