I can't seem to figure out how to use mark.js (or some other tools) that would allow me to trigger the animated highlighting when a button is selected in a table of contents.
e.g. Imagine on the left side of the page is a list of questions. When the user selects one of these questions/clicks on a question, the corresponding answer gets highlighted on the right side, somehow. It could be that the right side of the page goes dark except for the corresponding text or a red frame animates around the corresponding text, or is highlighted...any ideas?
In other words, the highlighting is triggered based off of a click or tap, and not a search result.
You don't need mark.js as it's much more easier:
$(function() {
$("[data-question]").on("click", function() {
var number = $(this).attr("data-question");
$("[data-answer]").removeClass("highlight");
$("[data-answer='" + number + "']").addClass("highlight");
});
});
.questions,
.answers {
float: left;
width: 50%;
}
.highlight {
background: red;
}
<div class="questions">
<ul>
<li data-question="1">Question 1</li>
<li data-question="2">Question 2</li>
<li data-question="3">Question 3</li>
</ul>
</div>
<div class="answers">
<ul>
<li data-answer="1">Answer 1</li>
<li data-answer="2">Answer 2</li>
<li data-answer="3">Answer 3</li>
</ul>
</div>
Related
I created a good looking website using html5, CSS, bootstrap. I wanted to know if I can change the background colour and nav bar selection colour automatically in code during day (blue) and during night (dull red). Is there anything I can do to change the colour of nav bar and background based on user's time?
Here's my code:
<body>
<nav>
<h1 style="font-family:Helvetica;">
<ul class="nav">
<li>Menu 1
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li><a class="dropdown" href="#">Menu 2</a>
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li><font size="+4", color="white">IBAE</font> <br></li>
<li>Menu 3
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
</ul>
</h1>
</nav>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid"> <!-- Cards-->
<div class="row">
<!--row one column two-->
<div class="col-sm-3"><div class="cardpop">
<div class="card img-fluid" style="width:600px">
<img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<font color="white">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
See Profile
</font>
</div>
</div></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
Here's CSS
nav h1
{
vertical-align: middle;
background-color: rgb(0, 0, 0);
border: 10px solid rgba(0, 0, 0, 0);
text-align: center;
position: fixed;
position: top;
min-width: 100%;
z-index: 3;
}
.nav ul
{
vertical-align: middle;
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 rgba(255, 255, 255, 0);
background: rgb(0, 0, 0);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
z-index: 3;
}
.card-img-wrap img {
transition: transform .25s;
width: 100%;
}
.card-img-wrap:hover img {
transform: scale(1.2);
}
.card-img-wrap:hover:after {
opacity: 1;
}
This is my entire code. There's no custom java script. Please help me with code or study material or links for study material I could use to implement the logic.
Also can I achieve what I am looking for using only CSS?
If it is not possible how do I program using java script?
I really appreciate the help in advance. Thank you very much.
Just use setInterval to periodically (once per minute should be more than enough) call a function that uses the JavaScript Date object to check the time of day, then set the background colors as needed.
Call that same function when the page loads to start up with the right colors.
Update: Here's some sample code.
function init() {
function setBackgroundForTimeOfDay() {
const body = document.querySelector('body');
const hours = new Date().getHours();
if (hours < 6 || hours >= 18)
body.style['background-color'] = '#900';
else
body.style['background-color'] = '#46F';
}
setBackgroundForTimeOfDay();
setInterval(setBackgroundForTimeOfDay, 60000);
}
Plunker here: http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview
The question boils down to whether it's possible to change a CSS Style based on the time of day.
There are a few ways to go about it, but for the best user experience you probably want to set the style at HTML generation time. That would mean something like server-side setting a class on the body element to indicate that you want to use the Night Time theme. Or you can simply write the style in line, but it's probably better to keep styles external when possible.
The other option is to do the same thing in the user's browser using JavaScript. Just set a class or set the style in-line. JavaScript has the advantage that it will respect the user's local time, but if their system clock is incorrect, they'll get an incorrect theme. It also means you don't have to worry about detecting the user's time zone server-side, if you're concerned about users from different parts of the country / world.
Some thing like this would work, 1000 means 1 sec, you will have to tweak it further to make it less frequent
setInterval(()=>{
var color=new Date().getHours()>16?'red':'blue'
document.querySelector('.nav').style.background=color
}, 1000)
But to best way to make changes to your navbar follow this stack overflow link:
Change navbar color in Twitter Bootstrap
I have a main menu.
The sub-menu opens when the link of any of the PARENT <li> that have children is clicked.
At this point, a class moves-out is added to the main menu and a CSS transition is started.
After the transition ends, the sub-menu is displayed.
The sub-menu contains the clicked <li> (if clicked again will take us back to the main menu) and it's children.
Here, my goal is to disable the click event on the parent <li> for 1 second,
then after this 1 second give it back the ability to be clicked so we can go back to the main menu.
An example of the navigation would be :
<ul class="main-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<span>PARENT</span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
And so on...
</ul>
</li>
</ul> <!-- .main-nav -->
The only way that worked for me was to hide/show the PARENT when the main menu has the moves-out class added to it like so :
$('.subnav-trigger').on('click', function(event) {
event.preventDefault();
if ($('.main-nav').hasClass('moves-out')) {
var $this = $(this);
$this.hide();
setTimeout(function(){
$this.show();
}, 1000);
}
}
I've tried A LOT off things, this is the only one that is near to my goal.
Instead off $this.hide(), $this.off('click') is working
but inside the setTimeout what ever I do to regain the click doesn't work.
Any help would be greatly appreciated.
NOTE : I want this to prevent fast click/re-click. Don't forget the transition ;)
Thanks again in advance for any help.
SYA :)
Try setting pointer-events on the li tag and resetting it after 1 second.
$('.subnav-trigger').on('click', function(event) {
event.preventDefault();
var $this = $(this);
$this.parent().css("pointer-events","none");
if ($('.main-nav').hasClass('moves-out')) {
$this.hide();
setTimeout(function(){
$this.show();
$this.parent().css("pointer-events","auto");
}, 1000);
}
});
Here's a way using a recursive function that enabled the click handler, disables it on click, enables the transitionend event, adds your class that enables the transition, then re-enables the function. Enabled a 3s transition to slow it down for the example.
var $lis = $('li'),
clicker = function() {
$lis.on('click', function() {
$lis.off('click');
$(this).on('transitionend', function() {
clicker();
}).addClass('color');
});
}
clicker();
li {
transition: background 3s;
}
li.color {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
More like a debounce problem, you might want to take a look at it if you have not used it before, it will help a lot in design you code.
For the following example, I added moves-out to ul for testing, you can check the console.log to see the result. To use in your app don't forgot to remove it (moves-out) from the <ul...>
<ul class="main-nav moves-out">
function debounce() {
if ($('.main-nav').hasClass('moves-out')) {
console.log("Clicked - click event Disabled..");
$(this).off('click');
setTimeout(function() {
$(".subnav-trigger").on('click', debounce);
console.log("click event enabled!");
}.bind(this), 1000);
}
};
$(".subnav-trigger").on('click', debounce);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="main-nav moves-out">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<span>PARENT</span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
And so on...
</ul>
</li>
</ul>
<!-- .main-nav -->
I'm trying to toggle a menu dropdown with slideToggle but I can't seem to get it working. My goal is to click on "Attack" and have the list of attack options show. Here is my code.
<div class="turn-option" id="attack">
<h2>Attack</h2>
<div class="attack-menu">
<ul>
<li class="attack-type">Attack 1</li>
<li class="attack-type">Attack 2</li>
<li class="attack-type">Attack 3</li>
<li class="attack-type">Attack 4</li>
</ul>
</div>
</div>
.attack-menu {
display: none;
}
$(document).ready(function() {
$("#attack").click(function() {
$(".attack-menu").slideToggle("fast");
});
});
This works fine. Your jquery library might be causing the error. Try including this script :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Refer this link : Example
This question already has answers here:
Creating Drop Down Menu on click CSS
(8 answers)
Closed 8 years ago.
I have an simple example of drop down menu by click using AJAX:
http://jsfiddle.net/dmitry313/1s62x8hc/2/
HTML:
Dropdown menu
<ul style="display:none">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
SCRIPT:
$(document).ready(function () {
var click = function () {
var divObj = $(this).next();
var nstyle = divObj.css("display");
if (nstyle == "none") {
divObj.slideDown(false, function () {
$("html").bind("click", function () {
divObj.slideUp();
});
});
}
};
$(".dropmenu").click(click);
});
Is it possible to make the same without any script, just using CSS?
EDIT: Updated link
You can trigger a css click using a hack!!
Work with an checkbox!!
Sample:
ul{
display: none;
}
#checkbox{
opacity: 0;
}
#checkbox:checked + ul {
display: block;
}
<div class="container">
<label for="checkbox">Dropdown menu</label>
<input id="checkbox" type="checkbox" />
<ul>
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
You can use transitions to animate the show an hide effect :)
This is just a very simple example!!
Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.
No, You need a least three line of javascript.
As far as I know you can't have an onClick method or something similar in CSS.
pure Html/CSS Solution using html nested lists - would still need a few lines of JS to make it onClick
http://jsfiddle.net/t1zw41ep/2/
<nav>
<ul>
<li>Dropdown Menu
<ul>
<li>Dropdown Link 1
</li>
<li>Dropdown Link 2
</li>
</ul>
</li>
</ul>
</nav>
See: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
I am trying to accomplish some different thing which is something similar to the feature of news ticker. Before I ask this I tried to get it work using different different news ticker jquery plugins. But still no Luck.
This is markup I am using and let me to explain my requirement through it.
<div class="container">
<ul class="feeds" id="feeds">
<li class="category">category 01</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
<li class="category">category 02</li>
<li class="category-item">Sub category 01</li>
<li class="category-item">Sub category 02</li>
<li class="category-item">Sub category 03</li>
<li class="category-item">Sub category 04</li>
</ul>
</div>
I need to display these list item like a news stick in a horizontal bar. How I need to display it is one category item with following two subcategory items in a row. If particular category have more than two subcategory then I need to display next two subcategory items and like wise. When displaying subcategory secondly the main category name should be still display in the row.
Finally I tried with Jquery Advance News Ticker plugin. It was close but not 100%
$('#feeds').newsTicker({
row_height: 40,
max_rows: 1,
duration: 3000,
pauseOnHover: 0
});
So anybody can tell me how to accomplish this with javascript or can I know is there any jquery pluging to do this.
UPDATE : CSS -
> .container {
background: #1e1e1e;
height: 40px;
.feeds {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: table;
> li {
display: inline-block;
color: #FFFFFF;
display: inline-block;
padding-right: 50px;
//display: table-cell;
vertical-align: middle;
padding-top: 5px;
}
> li.category {
background: #a11041;
margin: 7px 30px 0;
padding: 3px 10px;
}
}
}
Hope somebody will help me out regarding this.
Any idea would be greatly appreciated.
Thank you.
I can't find an existing solution for what you want, but if you are planning on writing your own solution this may help.
It uses a somewhat different HTML structure, but I think this is what you're trying to achieve.
HTML:
<div id="feed">
<ul>
<li>
Category 1
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
<li>Subcategory 3</li>
<li>Subcategory 4</li>
<li>Subcategory 5</li>
<li>Subcategory 6</li>
<li>Subcategory 7</li>
<li>Subcategory 8</li>
</ul>
</li>
</ul>
</div>
With CSS you make sure that the viewport (#feed) only shows one category name and two subcategories. Then, with JavaScript, you allow the user to go to the next two subcategories by changing the top or margin-top of the sub-ul-element. If the user reached the bottom of subcategories, it goes to the next category. If the user reached the last category, it goes to the first category again.
Working example: http://jsfiddle.net/Ln73X/1/
I never get why people like to use plugins so much, it just uses a lot of space (size vise)!
anyways I had to do this a while ago, I didn't use a plugin, just pure css and jQuery. this example provides an always animating news sticker. if you want an example like the one you provided you can easily implement it, or if it is too difficult for you let me know and I'll provide you one.
first you have to set the overflow of the container to hidden in css and then put the ul inside another div (let's call it #box).
and as for your jQuery:
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
setInterval(function(){
$('#box ul li:first-child').animate({marginTop:'-110px',paddingTop:'0px'},4980,'linear');
setTimeout(function(){
$('#box ul li:first-child').finish().appendTo('#box ul').css('margin-top','0px').css('padding-top','10px');
},5000);
},5020);
the marginTop in the animation should be the negative of the height of your li. (in this example it is -110px)
here is the demo:
http://codepen.io/anon/pen/ClzLy