I want slide number on each navigation bar bullet points
HTML code
<div id="slideshow">
<div class="container">
<div class="flexslider showOnMouseover ">
<ul class="slides">
<li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
<li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
</ul>
</div>
you can do that by removing a class name
use the below code to do it as soon as the slider starts.
$('.flexslider').flexslider({
start : function(){
$('.flex-control-paging').removeClass('flex-control-paging');
}
});
NOTE: You may need to change some more css to make it look pretty
Anyone still looking for the solution to this as I was, it can be solved simply by modifying the style sheet 'flexslider.css'.
The script already gives each nav link a number, but hides the number from view using a text-indent of -9999px. To get the numbers back, modify the class '.flex-control-paging li a'. As an example, here's the original:
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Modify it to:
.flex-control-paging li a {
width: 20px;
height: 20px;
font-size: 20px;
display: block;
background: #ddd;
cursor: pointer;
}
And...
.flex-control-paging li a:hover {
background: #333;
color:#eee;
}
.flex-control-paging li a.flex-active {
background: #333;
color:#FFF;
cursor: default;
}
Should give you a good starting point to add your own style to.
Related
I have:
<ul id="list">
<li>Some text <span class="removeParent">X</span></li>
</ul>
And when the span.removeParent is clicked, li have to be deleted.
It's very simple but the only (unfortunately working) solution I came up with was:
span.addEventListener("click", this.parentElement.parentElement.removeChild(this.parentElement);
It may be out of context so here's the link to the full to-do app:
https://jsfiddle.net/w246hn3b/3/
I'm not sure if
this.parentElement.parentElement.removeChild(this.parentElement);
is the best, most efficient solution
This is a great use case for event delegation. Since the click event will bubble up the DOM to the parent node, you can listen for the click event on the root ancestor, and then check to see if the clicked element matches your target type.
var todolist = document.getElementById('todolist');
todolist.addEventListener('click', function(e){
if(e.target.matches('.remove')){
todolist.removeChild(e.target.parentNode);
}
});
.remove {
color: #821818;
display: inline-block;
padding: 3px 10px;
border: 1px solid #d84c4c;
border-radius: 2px;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
box-sizing: border-box;
background: #f1bbc0;
font-weight: 700;
font-size: 25px;
}
#todolist{
list-style:none;
}
#todolist li{
display:block;
position:relative;
padding:8px 6px;
width:300px;
margin:5px 0px;
border-radius:2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
}
<ul id='todolist'>
<li>1<span class='remove'>×</span></li>
<li>2<span class='remove'>×</span></li>
<li>3<span class='remove'>×</span></li>
<li>4<span class='remove'>×</span></li>
<li>5<span class='remove'>×</span></li>
<li>6<span class='remove'>×</span></li>
<li>7<span class='remove'>×</span></li>
<li>8<span class='remove'>×</span></li>
</ul>
some resources on event delegation:
https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/
https://davidwalsh.name/event-delegate
It's now clear to me that mixins and inheritance are generally considered bad and composition is the way to go, this from:
https://medium.com/#dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
Now, what to do when you find two components that specialize in different things and you want a component that is the result of both behaviors mixed? For instance, I want a textarea that both grows automatically when text goes beyond initial rows, and allow mentions inside (aka. mix react-mentions with react-textarea-autosize)
How am I supposed to compose both in a way that works?
Am I supposed to code a brand new component copying/merging the inner code from both components?
What's the ReactJs way to compose in such scenarios?
I came across the same issue. With react-mention you don't have to use the react-text-autosize as you can achieve the same behavior with css which can auto grow the textarea generated. Consider following example
<MentionsInput
value={content}
placeholder="Add a comment"
onChange={this.onChange}
className="mentionWrapper">
<Mention
trigger="#"
data={users}
className="mentionedFriend"
displayTransform={(id, display) => `#${display}`}
/>
</MentionsInput>
For this i've used the following styles
.mentionWrapper {
width: 100%;
background: transparent;
font-size: 0.9rem;
color: #a9b5c4;
}
.mentionWrapper .mentionWrapper__control {
border-radius: 25px;
border: 1px solid #3a546f;
min-height: 45px;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__highlighter {
padding: 0.7rem 1rem;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__input {
padding: 0.7rem 1rem;
outline: 0;
border: 0;
resize: none;
outline: none;
font-size: 0.9rem;
color: #7288a3;
border-color: #3a546f;
overflow: hidden;
}
.mentionWrapper .mentionWrapper__control .mentionWrapper__input::placeholder {
color: #7288a3;
}
.mentionWrapper__suggestions {
background-color: rgba(0, 0, 0, 0.6) !important;
padding: 10px;
-webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
border-radius: 0.8rem;
}
.mentionWrapper__suggestions .mentionWrapper__suggestions__list {
font-size: 14px;
}
.mentionWrapper
.mentionWrapper__suggestions
.mentionWrapper__suggestions__item--focused {
color: #ffffff;
border-bottom: 1px solid #3a546f;
font-weight: 600;
}
.mentionedFriend {
color: #7288a3;
text-decoration: underline;
}
Key point here is that i've applied a min-height of 45px to "control" div which is append by react-mention package. By doing so you will get the attached result.
So Im using Bootstrap 3, JQuery and Jquery-UIs autocomplete. So on the my project, the result looks like this,
But according to the documentation page, it is supposed to look like this
with the clickable items on mouse over and everything. My search box HTML is as follows:
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input id="titles" type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-default">GO</button>
</form>
The documentation page for jquery-ui autocomplete widget is here
Any pointers? Thanks in advance. PS:The photos were taken by a potato :-)
#dmlittle gave me the idea
You need to also style the autocomplete widget the Boostrap way
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
I am using the below css for my menu items. I need to highlight the active page in the menu bar. Can anyone correct the css. Or can I achieve using javascript or some type script?
#menu ul {
margin: 0;
padding: 7px 6px 0;
background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width 100%;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 16px;
color: #444444;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#menu a:hover {
background: #000;
color: #fff;
}
#menu .active a,
#menu li:hover > a {
background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px;
background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu ul ul a:hover {
background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url('/Images/Overlay.png') repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#menu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #menu ul {
height: 1%;
}
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>Save</span></li>
<li><span>User</span></li>
</ul>
</div>
This can't be done only via css you need to use some jQuery or PHP to add an active class to the current page link and then style it via css
Check these
Stackoveflow question with same problem
Solution from css tricks
Why all the tricky JavaScript or jQuery? This can be done so easily with some simple CSS and HTML.
Create a CSS class for the active page, for example:
.active{
background-color:white;
color:red;
}
Then on each of your pages, add the class .active in your navbar to whichever menu item is the current page, for example:
** On the Update page:**
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>Save</span></li>
<li><span>User</span></li>
</ul>
</div>
So on each page whichever <li> in your navbar is the current page just simply add class="active" as shown above.
Two basic things must happen:
Function to be triggered.
Then the function must somehow affect the styling.
There are probably many ways to do this. But what's the best way? Let's look at some various options
Function to be triggered
onclick manually embedded into each of the menu elements
Dynamically inject onclick event into each menu item when the document loads
Event listener for a certain type of element
Event listener for a class
Multiple event listeners for a specific id for each menu item
In any case, you either need an onclick event, or an event listener. The onclick is more direct.
<a onclick="myFunction()">Home</a>
This way, you look at the HTML, and you immediately know that an onclick event is tied to it. Whether the trigger for the function is embedded in the HTML element, or and event listener in a <script> tag, either way, there must be a way to identify the element in order to change the style. So, the element needs an id.
<a id="menuHome" onclick="myFunction()">Home</a>
Even if you use the this key word, you still need an id. this.id
<body>
<a id="myId" onclick="runIt(this.id)">Home</a>
</body>
<script type="text/javascript">
function runIt(argInput) {
alert("This is what was passed in: " + argInput);
};
</script>
If you use the this keyword alone, in the tag, it returns nothing.
<a id="myId" onclick="runIt(this)">Home</a>
The above line of code won't give you anything for a reference to what element was clicked.
So, again, even if the this keyword is used, there needs to be a way to identify what element was clicked.
Change the Styling
To change the style of a menu item, this code can be used:
<body>
<a id="myId" onclick="runIt(this.id)">Home</a>
</body>
<script type="text/javascript">
function runIt(argInput) {
//alert("This is what was passed in: " + argInput);
var whatMenuItem = argInput;
var objectElement = document.getElementById(whatMenuItem);
objectElement.style.color = "green";
};
</script>
The above code changes the color of the menu item to green.
Or maybe you want to dynamically inject onclick events into every menu item when the document loads. This jsFiddle shows how to do that.
jsFiddle Inject onclick events into menu anchor tags
In the jsFiddle example, not only an id is used, but also a class. Why? In order to loop through every <a> tag in the menu, that information needs to somehow be retrieved. It is retrieved by:
document.getElementsByClassName("className")
Now you have yet one more thing added to your HTML.
<div id="menu">
<ul>
<li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a></li>
<li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a></li>
<li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a></li>
</ul>
</div>
This jsFiddle shows changing the menu style with an event listener:
jsFiddle Event Listener - Change Style
Determining what menu element was clicked and changing the style of that menu element is only part of what is needed. There needs to be a way to put the menu item back to its original style if the user navigates to another menu.
This jsFiddle shows a complete working example of highlighting the current menu item, recording which menu item is current, setting the old menu item back to it's default, and checking if the user clicked the active menu item twice.
jsFiddle Highlight Active Menu Item on Menu Bar
Can CSS be used to make a left and right edges of a content container look like this image? I have been trying to figure out a way to do this without using an image, if that is possible.
Here is jsFiddle that I have been working on. The CSS for the "top" class never gets applied. The CSS for the "bottom" class seems to work ok though.
http://jsfiddle.net/kXuQY/
HTML:
<div class="drop-shadow top bottom">
Content here.
</div>
CSS:
.drop-shadow {
/** Create container. Box-shadow here is to color the inside of the container **/
position:relative;
width:50%;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:3em;
margin: 2em 20px 4em;
text-align:center
}
.top:before,
.top:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-1;
top:20px;
left:0;
width:40%;
height:1em;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.top:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
.bottom:before,
.bottom:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-2;
top:90px;
left:0;
width:10%;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
-o-transform:rotate(99deg);
transform:rotate(99deg);
}
.bottom:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-99deg);
-moz-transform:rotate(-99deg);
-o-transform:rotate(-99deg);
transform:rotate(-99deg);
}
You can use ::before and ::after pseudo elements to achieve the effect, see here.
Example: (Demo)
HTML:
<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>
CSS:
#box:before, #box:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
content: "";
left: 10px;
max-width: 300px;
position: absolute;
top: 80%;
transform: rotate(-3deg);
width: 50%;
z-index: -1;
}
#box:after {
left: auto;
right: 10px;
transform: rotate(3deg);
}
#box {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 4px 4px 4px 4px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.5;
margin: 60px auto;
padding: 2em 1.5em;
position: relative;
text-shadow: 0 1px 0 #FFFFFF;
width: 60%;
}