Im having a problem using href/anchor scrolling with angularjs. Once I click the h ref link it always links to the index page sample like this http://xxxxxx/#!/index#sec-menu not sure what I'm doing wrong.
Thanks for the assistance.
HTML
<div class="nav-holder main-menu">
<nav>
<ul>
<li>
Menu
</li>
</ul>
</nav>
</div>
<span class="fw-separator" id="sec-menu"></span>
not sure if this is the cause but I have something like this in my app.js
.otherwise({
redirectTo: '/index'
});
<div class="nav-holder main-menu">
<nav>
<ul>
<li>
<a ng-href="#/?scroll=sec-menu">My element</a>
</li>
</ul>
</nav>
</div>
<span class="fw-separator" id="sec-menu"></span>
change the run code in the module declaration in app.js like so:
app.run(function($location, $rootScope) {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var po= 0;
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
po= $target.offset().top;
}
$("body,html").animate({scrollTop: po}, "slow");
});
})
Related
I have a div like this:
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122"></li>
</ul>
</div>
Inside this div I have added another div using jQuery:
Here's the jQuery:
jQuery('li.banner-list-img').prepend(jQuery('<div class="show-price"> </div>'));
After I run this jQuery a div is added:
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122">
<div class="show-price"> </div>
</li>
</ul>
</div>
Now I'm trying to get the value of data-price attribute to show inside the div(with class show-price with this jQuery:
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).text();
jQuery('.show-price').html(itemprice);
})
But this is not working. It should show something like this:
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122">
<div class="show-price"> 122 </div>
</li>
</ul>
</div>
How can I do like this.
You could use jQuery.data() to get the data attribute and .find() to only update the element with show-price class which is descendant:
jQuery('li.banner-list-img[data-price]').prepend(jQuery('<div class="show-price"> </div>'));
jQuery('.banner-list-img[data-price]').each(function() {
jQuery(this).find('.show-price').html(jQuery(this).data('price'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122"></li>
<li class="banner-list-img" data-price="123"></li>
<li class="banner-list-img" data-price="124"></li>
<li class="banner-list-img"></li>
</ul>
</div>
And this could be improved doing the prepend with the data value all in one go:
jQuery('.banner-list-img[data-price]').each(function() {
jQuery(this).prepend(jQuery('<div class="show-price">' + jQuery(this).data('price') + '</div>'));
})
.banner-list-img[data-price="0"] .show-price {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="configurator-item">
<ul>
<li class="banner-list-img" data-price="122"></li>
<li class="banner-list-img" data-price="123"></li>
<li class="banner-list-img" data-price="124"></li>
<li class="banner-list-img"></li>
<li class="banner-list-img" data-price="0"></li>
</ul>
</div>
You can use simply this code
$(".button").click(function(){
alert("Value: " + $(".show-price").val());
});
You this in click event is referring to button only.
So you have to do something like this
jQuery('.button').click(function() {
var itemprice = jQuery('.banner-list-img').attr('data-price');
jQuery('.show-price').html(itemprice);
})
Above code only works for one li element. If there are multiple li elements you should use this code
jQuery('.button').click(function() {
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).attr('data-price');
jQuery(this).children('.show-price').html(itemprice);
})
})
After updating question
jQuery('.banner-list-img').each(function() {
var itemprice = jQuery(this).attr('data-price');
jQuery(this).children('.show-price').html(itemprice);
})
Or more better way for your example
jQuery('.banner-list-img').each(function() {
jQuery(this).prepend('<div class="show-price">' + jQuery(this).attr('data-price') + '</div>');
})
Here we are adding HTML when prepending div inside li
I am using the mustard css framework but I am having an issue when resizing my browser. The navigation bar is supposed to drop into a hamburger, the appears but when i click it nothing appears within it. I copied and pasted the mustard exact nav bar but still doesn't work. Am i missing something else I have to link.
My Navigation Bar
<nav class="mynav">
<div class="nav-container">
<div class="nav-logo">
<div>
<img class="mylogo" src="imgs/abs.png" alt="">
</div>
<a class="myfont" href="index.php">Abs'olute Fitness</a>
</div>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</nav>
Mustard Navigation Bar
<nav>
<div class="nav-container">
<div class="nav-logo">
mustard
</div>
<ul class="nav-links">
<li><a class="active" href="/docs/installation">Docs</a></li>
<li>GitHub</li>
<li>Support</li>
</ul>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>Docs</li>
<li>GitHub</li>
<li>Support</li>
</ul>
</div>
</nav>
You need some javascript to toggle appearance. There's jquery example in repository, I'm using vanilla JS for that:
const hide = ((elem) => {
elem.style.display = 'none';
});
const show = ((elem) => {
elem.style.display = 'block';
});
const toggle = document.querySelector('.mobile-menu-toggle');
const menu = document.querySelector('.mobile-menu');
toggle.addEventListener('click', ((e) => {
if (menu.style.display !== 'block') {
e.preventDefault();
e.stopPropagation();
show(menu);
}
}));
document.body.addEventListener('click', ((e) => {
if (menu.style.display === 'block') {
e.preventDefault();
e.stopPropagation();
hide(menu);
}
}));
I have some checkbox which comes from loop in angularjs. Here I need to uncheck all the checkboxes on click a button.Here I have tried already but its not working,can anyone please help me on it.Here is the code below
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="(x, y) in items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li ng-repeat="p in y.value"><input type="checkbox" ng-model="vehicle" name="vehicle">{{p}}</li>
</ul>
</li>
</ul>
<button ng-click="myFunct()" type="button">click</button>
</div>
SCRIPT
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http) {
$scope.items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}
$scope.myFunct = function() {
$scope.vehicle="";
}
});
The combination ng-checked with ng-click is the best solution to control checkboxes from controller, you could try this:
<ul ng-repeat="(x, y) in items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li ng-repeat="p in y.value">
<input type="checkbox"
ng-checked="v"
name="Item.selected">{{p}}</li>
</ul>
</li>
</ul>
<input type="checkbox" ng-model="v" ng-click="checkAll()" />Clear all
Example: http://next.plnkr.co/edit/a9DInByf8a6yv6wl?preview
Hope it helps!
Assign $scope.vechicle=false
Updated code
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http)
{
$scope.items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}
$scope.myFunct = function() {
$scope.vehicle=false; //changed to false
}
});
I am currently building a website which contains a accordion menu.
My problem is the following, when I click the desired item which has to collapse it does collapse but it goes right back to uncollapsed after it collapsed.
$(document).ready(function(){
$(".set > a").on("click", function(){
if($(this).hasClass('active')){
$(this).removeClass("active");
$(this).siblings('.content').slideUp(200);
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
}else{
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
$(this).find("i").removeClass("fa-plus").addClass("fa-minus");
$(".set > a").removeClass("active");
$(this).addClass("active");
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
}
});
});
Here is the code (jsfiddle)
This code used to work perfectly fine, but for some reason it broke and doesn't work anymore.
I hope someone can help me out.
I think somewhere along the lines you have swapped your accordion to start open (ie removed the styles that initially hide it) so the following lines in your else both opens and closes it:
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
If you are starting with your accordion open, then you need to start with the active class on your link:
$(document).ready(function() {
$(".set > a").on("click", function() {
var link = $(this);
if (link.hasClass('active')) {
link.next('.content').slideUp(200, function() {
link.children('i').removeClass("fa-minus").addClass("fa-plus");
link.removeClass("active");
});
} else {
link.next('.content').slideDown(200, function() {
link.children('i').removeClass("fa-plus").addClass("fa-minus");
link.addClass("active");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-container">
<div class="set">
Vloeren <i class="fa fa-plus"></i>
<div class="content">
<ul class="submenu">
<li class="submenu-item">Witte vloer</li>
<ul class="submenu-two">
<li class="submenu-item">Witte vloer</li>
</ul>
<li class="submenu-item">Zwarte vloer</li>
<li class="submenu-item">Grijze vloer</li>
<li class="submenu-item">Paarse vloer</li>
</ul>
</div>
</div>
</div>
I have also cleaned up your jQuery and fixed your else
I'm trying to get the code below to execute an event that triggers once a user has hovered over a link. The event I'd like to be triggered is for a DIV to appear once the user had hovered over the link and disappear once the user has moved the mouse away from the menu. (it's supposed to for sub menus on a top level navigation.) However the 'mouseover' event gets fired, but not the 'mouseout' event. It's been confusing me for a little bit.
function menuBehavior() {
var subMenu = $$('.has_menu').getChildren('A')[0];
window.addEvent('domready',
function() {
subMenu.addEvent('mouseover',
function() {
this.getSiblings('.menu-level_2').addEvent('mouseover',
function(e) {
this.getSiblings('.menu-level_2').setStyle('opacity', 1);
e.stop();
});
this.getSiblings('.menu-level_2').addEvent('mouseout',
function(e) {
this.getSiblings('.menu-level_2').setStyle('opacity', 0);
e.stop();
});
});
});
} // end of FUNCTION menuBehavior
also here's the HTML for the menu layout.
<li class="menu-option has_menu">
<span class="menu-arrow">Menu Option #1</span>
<div class="menu-level_2">
<ul class="level_2">
<li class="more">
<span class="menu_level_2-more">Sub Menu Option #1</span>
<div class="bumper">
<div class="menu-level_3">
<ul class="level_3">
<li>
<span class="menu_level_3">Sub Menu Option #1</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #2</span>
</li>
</ul>
</div>
</div>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #2</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #3</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #4</span>
</li>
<li class="option-spcr"> </li>
<li>
<span>Sub Menu Option #5</span>
</li>
</ul>
</div>
</li>
Thanks in advance for any thoughts or insights in how to fix this code.
OK first of all this can all be done with CSS however you will need plenty of markup changes.
If you insist on the path you are on the mootools code will look more like:
window.addEvent('domready', function(){
$$('.has_menu > a').each(function(el){
el.addEvents({
'mouseover': function(e) {
el.getFirst('div').setStyle('opacity', 1);
},
'mouseout': function(e) {
el.getFirst('div').setStyle('opacity', 0);
}
});
})
});
However based on your HTML mark up this will not work as you will be mousing out of the A tag as soon as you enter the DIV
You would be better off removing the div and attaching the event to the LI tag and have the UL tag appear apon MOUSEENTER and hide the UL tag on MOUSELEAVE
I hope that gets you pointed in the right direction