I have a logo which is displaying properly and I want to have the Google Translate drop down display right below it then beside it with 20 pixels of space have my menu on the same line. Then below these two items display a horizontal divider. The main text shall display below the divider.
However, I am having trouble getting the Google Translate to display under the logo and the menu display next to it with some space between them:
The horizontal line is showing above these two items instead of below
them.
Could not get the space between Google Translate and menu
The Google Translate is overwritten the main text
I have created a fiddle to show the issue.
The main problem is with these two CSS item I believe but I have tried many variations and just couldn't get it to align properly.
/* PROBLEM IN THE FOLLOWING TWO CSS */
#google-translate {
left:10px;
position:relative;
top:0px;
float:left;
}
#header_right {
position:relative;
display:inline;
padding-left:20px;
}
Your assistance is greatly appreciated. Thank you.
EDITED:
Expected outcome would look like:
LOGO
Google Translate + 20px + Menu
Horizontal line
Main Text
Google Translate and the menu should sit on top of the horizontal line.
Here is the link of js fiddle , look into it
<div id="header_holder">
Logo
<div id="header_right">
<div id="google-translate">
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
<div id="left20">
<ul class="dropdown dropdown-horizontal">
<li><span class="dir">Menu A</span>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li><span class="dir">Menu B</span>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li>Menu C</li>
<li>Menu D</li>
</ul>
</div>
</div>
<div id="rule">
</div>
<div>
MAIN BODY TEXT 1
<BR /> MAIN BODY TEXT 2
<BR /> MAIN BODY TEXT 3
<BR /> MAIN BODY TEXT 4
<BR /> MAIN BODY TEXT 5
<BR /> MAIN BODY TEXT 6
<BR />
</div>
</div>
https://jsfiddle.net/eacnn958/
Check the above link
Do this change only in css
#rule {
border-top: 1px solid #000000;
margin-top:25px;
}
ul.dropdown {
font-weight: normal;
font-family: arial, verdana, sans-serif;
font-size: 12px;
padding-left:20px;
}
here is the https://jsfiddle.net/cfhu1hvy/ check i have made change only in css
Managed to make it work by:
Remove the position:relative; on #google-translate
Change the display to "inline-block" instead of "inline" on #header_right
Add "margin-top:15px;" to #rule
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 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>
enter image description here
HOw to make text moving by clicking previous icon and next icon?like image slider...i want only 10 text to visible..rest all r to hide...nd by clicking all should appear.... i dont know javascript please help me!!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>
.new_line {
width:780px;
margin:0 auto;
height:50px;
}
.new_line ul li {
list-style-type:none;
float:left;
padding:10px 22px ;
}
.new_line ul li img {
float:left;}
</style>
</head>
<body>
<div class="new_line">
<ul>
<li> <img src="next.png"/> </li>
<!--<li> text 1 </li>
<li> text 2</li>-->
<li> text 3</li>
<li> text 4</li>
<li> text 5</li>
<li> text 6</li>
<li> text 7</li>
<li> text 8</li>
<li> text 9</li>
<li> text 10</li>
<!--<li> text 11</li>
<li> text 12</li>-->
<li> <img src="prev.png"/> </li>
</ul>
</div>
</body>
</html>
Have a look at this: http://jsbin.com/dopudeduto/edit?html,css,js,output
I included the bootstrap pagination, which was recommended in your
comments.
You can change to amount of li's that is displayed modifying the
limit variable.
in the beginning all li's but the first 3 are hidden using a data-attribute (they are hidden using css)
afterwards the event listener are bound to the buttons
in the functions for prev it first checks whether the first li is already shown
if not the last element is hidden
and the element before the currently first one is displayed
Let me know if you have any problems with this solution.
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*/
}
Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}
$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});
You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.
firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );
You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});