I'm trying to implement CSS3 selectors using :target for a drawer animation, without luck.
Using $locationProvider.html5Mode(false); the animations is not working. Turning that feature to "true" is allowing me :target selector but the routing is not working and displaying anything.
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
'myApp.services'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
$locationProvider.html5Mode(false);
}]);
...
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
Anyone has a suggestion or idea?
Use a reference app to get started, and ng-animate to integrate the animation:
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/daneden/animate.css/master/animate.css">
<style>
a {
font-size: 300%;
}
#Squidward:target { color: red }
</style>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
angular.module('demo', [
]).controller('MainCtrl', function(
$scope
){
$scope.items = [{
name: 'Squidward'
}, {
name: 'Plankton'
}];
$scope.add = function() {
$scope.items.push({
name: 'Patrick'
});
};
});
</script>
</head>
<body ng-controller="MainCtrl">
<div>
Add More Patrick
<ul>
<li ng-repeat="item in items" ng-animate="{
enter: 'animated flip'
}">
<a id={{item.name}}>{{item.name}}</a>
</li>
</ul>
</div>
</body>
</html>
References
AngularJS Wiki: JSFiddle Examples
AngularJS ng-animate + target Plunker Demo
Getting started with AngularJS
Angular JS 1.2x Developer Guide:Internet Explorer Compatibility
Firefox OS Simulator
Todo App for Firefox OS
Related
I hope someone can help a numpty :)
I am using Boostrap 5 and this Lightbox library https://trvswgnr.github.io/bs5-lightbox/
It uses data-toggle="lightbox" to initiate it and is working perfectly.
<a href="http://fpoimg.com/200x200?text=Forth" data-toggle="lightbox" data-gallery="gallery" >
<img src="http://fpoimg.com/200x200?text=Forth"></a>
I would like to apply some css styling eg. lightbox background-color, padding etc but I have no idea where to start.
I used to use the ekko-lightbox for BS4 which had its own CSS but I can't find one for this.
As I can see, bs5-lightbox library doesn't have it's own stylings, and using BS5 markups and stylings.
So you can apply BS5 stylings and HTML you want.
You can start by browsing .lightbox-carousel (CSS class selector) on your page and create custom styling.
Based on this class you can customize it's child nodes.
img {
width: 200px;
}
/* this is how you can add stylings to wrapper, f.e. */
.lightbox-carousel.carousel {
padding: 1rem;
background: #ffffff7a;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="module">
import * as Lightbox from 'https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.8/dist/index.bundle.min.js';
document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
e.preventDefault();
const lightbox = new Lightbox(el);
lightbox.show();
}));
</script>
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid my-lightbox-toggle">
</a>
How can I use data() values in <style>..</style>? I tried several combinations (with/without this, with/without {{brackets}} etc. but can't get it to work. If I enter a value like '#f00' instead it works fine.
I built a template like so:
<template>
<ul class="striped">
<li>foo</li>
<li>bar</li>
<li>foobar</li>
</ul>
</template>
<style>
ul.striped> li:nth-of-type(odd) {
background-color: this.colors[0].backgroundcolor; //dynamic value from data()
}
</style>
<script>
data() {
return {
colors: [{'backgroundcolor':'#def'}], //simplified version for explanation
[..]
</script>
With the Vue 3.2 release you can just use State-Driven Dynamic CSS like that :
<template>
<ul class="striped">
<li>foo</li>
<li>bar</li>
<li>foobar</li>
</ul>
</template>
<style>
ul.striped> li:nth-of-type(odd) {
background-color: v-bind('colors[0]')
}
</style>
<script>
data() {
return {
colors: ['#def'],
}
}
</script>
If you're using Vue 2 you may use CSS custom properties like that :
<template>
<ul class="striped" :style="`--color: ${colors[0]}`">
<li>foo</li>
<li>bar</li>
<li>foobar</li>
</ul>
</template>
<style>
ul.striped> li:nth-of-type(odd) {
background-color: var(--color)
}
</style>
<script>
export default {
data() {
return {
colors: ['#def'],
}
}
}
</script>
I have a menu including the following li
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
In this code, home page is actived. But want to enable active status when I click on my News page. How Can I do? Thanks for watching.
Please add Js like:
jQuery(document).ready(function () {
jQuery('.menu li a').click(function () {
//removing the previous selected menu state
jQuery('.menu li').find('a.active').removeClass('active');
//adding the state for this parent menu
jQuery(this).addClass('active');
});
});
a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
You can use jQuery to do so, use the script below:
$(document).ready(function () {
$('.menu ul li a').click(function () {
// This will remove active class from other links
$('.menu ul li').find('a.active').removeClass('active');
// This will add active class to the link clicked
$(this).addClass('active');
});
});
Here is code using pure javascript
화이팅!!
function change(elem){
var list = document.querySelectorAll(".menu ul li a");
for (var i = 0; i < list.length; ++i) {
list[i].classList.remove('active');
}
elem.classList.add('active');
}
.active{
color:red;
}
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>ABC</li>
</ul>
</div>
With some JS or JQuery , Add a click event on your links and call a method
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp" click="MyMethod">ABC</li>
</ul>
</div>
and in Jquery(or JS) :
perform this :
YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');
Or just look at this link : http://jsfiddle.net/designaroni/E53t9/
Modifying #לבני מלכה's answer to
a) Be a11y
b) Work with frameworks (like svelte)
c) Use events instead of the element itself (better for accessibility).
d) Have JSDoc Comments (for whoever must revise my code when this is old and non-modern).
Here is the HTML markup (pure HTML) :
<div class="navbar">
<ul>
<li><a onclick="change(e)" class="active">Link 1</a></li>
<li><a onclick="change(e)">Link 2</a></li>
</ul>
</div>
Pure JS (w/ JSDoc):
/**
* This function is used in the navbar. It gives styles to the active link.
* #param {Event | Undefined} e Event (click event).
*/
const change = (e) => {
if (!e) e = window.event; // <-- for Chrome <89, Firefox (I forgot versions), and Safari.
// If you have been used to JS for a bit, you may think that {} needs to be used above, but no. In modern JS, this is unnecessary. Of course, for multi-line if statements, you do need the brackets.
let list = document.querySelectorAll(".navbar ul li a");
list.forEach(elem => {
elem.classList.remove("active");
});
// Note the below comment is only if you are using a type checker, if you aren't then you can remove this. (the comment).
// #ts-ignore
e.target.classList.add('active');
}
The best and easy way to do it:
Just listen event on parent of list (ul)
After click find old active element and remove class for it
Set active class for target of event
document.querySelector('ul').addEventListener('click', event => {
// remove old active
document.querySelector('.menu .active').classList.remove('active');
// set new active
event.target.classList.add('active');
})
a {
color: #ccc;
text-decoration: none;
}
.active {
color: blue;
}
<div class="menu">
<ul>
<li><a class="active">Home</a></li>
<li><a>News</a></li>
<li><a>ABC</a></li>
</ul>
</div>
Here is some basic function i use for my current MVC project.
Add this to the master page or shared pages, the js need to run each time the site reload.
and you need to use jquery
$(document).ready(function () {
// the current page url eg /index.jsp
var href = window.location.href.toLowerCase();
$(".menu").find("a").each(function () {
// find the current li that match the current Url
if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
$(this).addClass("active"); // set the current li to active
})
})
.acive{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
I found a difference of my website between Chrome (or IE) and Firefox.
Given a simple example,
<style>
.showDiv {
display: block;
}
.hideDiv {
display: none;
}
</style>
<script type="text/javascript">
function displayDiv() {
$('#div_1').removeClass("hideDiv");
$('#div_1').addClass("showDiv");
}
</script>
</head>
<body>
<ul>
<li id="div_0" onclick="displayDiv();">Div
<div id="div_1" class="hideDiv">
subDiv
</div>
</li>
</ul>
</body>
Clicking on div_0, it shows div_1. Then I click the link in div_1 to redirect to another page. If I go back to previous page, the CSS style of div_1 remains in Firefox but Chrome. Could anyone tell what is the reason for this? Also, how can I modify my code to unify the behavior of two browsers (e.g. let Chrome to keep the CSS style OR let Firefox to renew the CSS style for previous page)?
Here are the result of going back to previous page after redirecting to test2.html.
For Chrome
For FireFox
Try the following. Hide the subdiv once it is clicked
FIDDLE DEMO
HTML
<ul>
<li id="div_0" onclick="displayDiv()">Div
<div id="div_1" onclick="hideDiv()" class="hideDiv"> subDiv
</div>
</li>
</ul>
jQuery
function displayDiv() {
$('#div_1').removeClass("hideDiv");
$('#div_1').addClass("showDiv");
}
function hideDiv() {
$('#div_1').removeClass("showDiv");
$('#div_1').addClass("hideDiv");
}
Hello i am using machforms, and unfortunately it doenst have a setting to hide or disable fields. im trying to do it with css, since you need to embed the form using javacode or php into yourpage like so
<script type="text/javascript">
var __machform_url = 'domain/forms/embed.php?id=13200';
var __machform_height = 479;
</script>
<div id="mf_placeholder"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="domain/forms/js/jquery.ba-postmessage.min.js"></script>
<script type="text/javascript" src="domain/forms/js/machform_loader.js"></script>
This is the html i see is View Page code.
<form id="form_13200" class="appnitro top_label" action="#main_body" data-highlightcolor="#FFF7C0" method="post"><div class="form_description"></div>
<ul>
<li id="li_1" class="#li_1 { display:none !important; } highlighted"><label class="description" for="element_1"></label><div><input id="element_1" class="element text medium" type="text" value="" name="element_1"></input></div></li>
<li id="li_buttons" class="buttons"></li></ul></form>
i put this in css
#li_1
{
display: none !important;
}
does not seem to work, could someone point me to a correct way of doing this. Thanks
You're doing your inline CSS wrong. The correct syntax is <li class="foo" style="display: none;">bar</li> hope this helps! So: <li id="li_1" class="#li_1 highlighted" style="display: none;">
class="#li_1 { display:none !important; } highlighted" is invalid. You're mixing stylesheet syntax with class name values.