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
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
so im working on a mobile menu and what i want to have happen is for the user to click on a list item and have that item move to the top of the list, then when the user clicks another item it moves the first item back to its original position and the second item up into the first position.
so im stuck on the second part and im not sure how to execute it. i've tried storing the list in an array and adding and removing items with splice, but i couldn't get it to work properly, any help would be great thanks.
$(".article-featured__navigation-menu-mobile li").click(function(){
var item = $(this).addClass('active-state');
$(".article-featured__navigation-menu-mobile").prepend(item);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item active-state"><a href="#" class="tax-filter" >0</a></li>
<li class="menu-item">1 </li>
<li class="menu-item">2 </li>
<li class="menu-item">3 </li>
<li class="menu-item">4 </li>
</ul>
You can do it with the Flexbox and take advantage of the order property which specifies the layout order of flex-items inside flex-containers. In other words, you can manipulate element's order regardless of the their position in the DOM.
I've also made some corrections to jQuery to give you the desired result:
$("ul li").click(function(){
$(this).addClass('active-state').siblings().removeClass('active-state');
});
ul {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically (assuming the mobile menu layout) */
list-style: none;
}
.active-state {
order: -1; /* the initial value of the order property is set to 0, i gave it -1 because of the changed direction, otherwise it would have been 1, i.e. place it above the others because of the higher value */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item"><a href="#" class="tax-filter" >Link 0</a></li>
<li class="menu-item">Link 1 </li>
<li class="menu-item">Link 2 </li>
<li class="menu-item">Link 3 </li>
<li class="menu-item">Link 4 </li>
</ul>
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>
I want to create universal tree menu, with ul li ul. And I've made something like this using just CSS:
CSS
.category-list {
}
.category-list li ul {
display: none;
}
.category-list li:hover > ul {
display: block;
}
HTML
<ul class="category-list">
<li>
Category 1
<ul>
<li>Sub-category 1</li>
<li>Sub-cateagory 1</li>
<li>Sub-category 1</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
</ul>
</li>
</ul>
https://jsfiddle.net/usz9ycmj/1/
--
And I want to make similar effect, but on click, so just current clicked tab displays its parent content.
Even more important for me is the ability to add and remove class on specific action:
.category-list li.current -- while is currently clicked (active)
.category-list li -- removed while different li is clicked (active)
Just, the trigger li has two different states for active and inactive. It changes the colors and arrow from closed to opened to give it a look of a tree menu - I bet You get the point.
I want the simple jquery code, if someone has time to help. feel welcome.
Here is a working code.
Please read the comments and let me know if something not clear.
// listen to the click event
var all_items = $('.category-list>li').click(function(event) {
// stop the propagation - this will abort the function when you click on the child li
event.stopPropagation();
var elm = $(this);
// remove the class from all the items
all_items.not(elm).removeClass('current');
// add class if it's not the current item
elm.toggleClass('current', !elm.is('.current'));
});
.category-list {
}
.category-list li ul {
display: none;
}
.category-list li.current > ul {
display: block;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<ul class="category-list">
<li>
Category 1
<ul>
<li>Sub-category 1</li>
<li>Sub-category 1</li>
<li>Sub-category 1</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
<li>Sub-category 2</li>
</ul>
</li>
</ul>
http://jsbin.com/tocewe/edit?html,css,js
I would like to know, if it is possible to use flexnav without it's fixed width buttons.
It would be great if all nav - items only use the width they need to display their text + their padding. At the Moment I've to divide 100% with the number of nav items we have. This value is set with .flexnav li{}
<div id="wrapper">
<h1>Flexnav - Content Width Test</h1>
<div class="menu-button">Show Menu</div>
<div class="nav-container container">
<div class="nav">
<ul class="flexnav" data-breakpoint="800">
<li>Startpage</li>
<li>About Us
<li>Products
<ul>
<li>Product Category 1</li>
<li>Products</li>
<li>Large Product Category</li>
<li>Small one</li>
<li>PPPPProducts</li>
</ul>
</li>
<li>Media</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
<p>The red space is needed for a search and some Icons</p>
</div>
I've made a codepen, so that you can see the working nav. I hope someone hopefully could give me a hint how to solve this problem:
http://codepen.io/anon/pen/aCjGq
Thanks!
'At the Moment I've to divide 100% with the number of nav items we have.'- no need to do that. Just give the container div of the menu a width and use the flexnav plugin in the following way :
$(".flexnav").flexNav({
'calcItemWidths': true , // dynamically calcs top level nav item widths
});
The question is old, but this might help someone. You can add this to the CSS:
.flexnav > li {
width: auto;
}
.flexnav > li.has-subitems {
padding-right: 30px;/*to account for the menu dropdown icon*/
}
.flexnav li ul{
padding-left: 0 !important;
min-width: 210px;/*or whatever you want*/
}