How can I make this bootstrap Translate button work as if it was the google translate button? https://jsfiddle.net/bobrierton/1hx1b5sr/
So that when the translate button I created opens the menu from the google button when its pressed. Maybe hiding but using the functionality somehow?
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<li class="">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
<i class="search fa fa-language"></i> Translate
</a>
</li>
</ul>
<div id="google_translate_element" style="float:left; padding-left:15px"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
You can hide the Google Translate button with opacity: 0. Opacity does not remove the button, so it is still possible to click it, even if it is not visible. You need to place your own button behind the invisible Google Translate button, otherwise it wouldn't be clickable (it is covered). Be aware that :hover and :focus and so on do not work on the visible button, because it is covered by the invisible one. The position: relative; on the parent is necessary, because position always orients on the next parent which has also the attribute position set to something other than static.
Replace this line:
<div id="google_translate_element" style="float:left; padding-left:15px"></div>
With these lines
<div style="position: relative;">
<div id="google_translate_element" style="position: relative; opacity: 0;"></div>
<button style="position: absolute; left: 0; top: 0; z-index: -1;">Translate</button>
</div>
Related
I would like to implement the following functionality. When the user click on the thumbnail/link, the image of that thumbnail will be displayed on the iframe, at the same time jumping to the description of that thumbnail - Thank You
<style>
.flex-container{
display: flex;
}
.scrollBox{
overflow: auto;
width: 400px;
height: 530px;
}
</style>
<body>
<div class="flex-container">
<nav class="navigation">
<a href="../img/image1.png" target="full-size">
image1
</a>
<br>
<a href="../img/image2" target="full-size">
image2
</a>
</nav>
<iframe name="full-size" width="245" height="560"
src="../img/image1">
</iframe>
<div class="scrollBox">
<h1>Image1 Descriptions</h1[![enter image description here][1]][1]>
Lorem120
<hr>
<h2>Image2 Descriptions</h2>
Lorem200
</div>
</div>
</body>
My Attempt:
When I clicked on the thumbnail, it'll also click on another anchor tag that'll jump to the description (I just hide the tag that link to the description).
<script>
function jumpToDescription(){
document.getElementsByTagName("a")[2].click();
}
</script>
<div class="flex-container">
<a href="../img/image1.png" target="full-size" onclick="jumpToDescription()">
image1
</a>
.
.
.
<a style="display: none" href="#image1Description">Image1</a>
</div>
My question is how can I rewrite jumpToDescription() to make the function reusable? Instead of creating a unique function for every thumbnail with a unique .getElementsByTagName's index number. Also if you guys have a better approach than this one I'm open to it as well. - Thank You
I have a hidden popout menu that toggles its visibility on the click of a button. When the popout menu becomes visible it displaces the main content to the bottom of the page. The idea would be to have the popout menu is displayed over the content div.
HTML:
<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
<div class = "menu_nav_inner align-center pad-2">
<ul>
<li><button class="static_nav_btn">THE MISSION</button></li>
<li><button class="static_nav_btn">OUR WORK</button></li>
<li><button class="static_nav_btn">WHO WE ARE</button></li>
<li><button class="static_nav_btn">MISS ROSIE</button></li>
<li><button class="static_nav_btn">SCHOLARSHIP</button></li>
<li><button class="static_nav_btn">CONTACT</button></li>
</ul>
<div class="box">
DONATE
</div>
</div>
</div>
<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
<div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!------- Main body ------->
<main id="content" class="flex-grow">
<div id="homepage-banner">
<div class="page-banner">
<h2 class="small-hidden">
FOUNDATION
</h2>
</div>
</div>
</main>
CSS:
(Popout menu)
.popout_navbar_align_center {
background-image: url("Assets/Textures/sandpaper.png");
background-color:;
width: 240px;
height: 100%;
top: 0;
left: 0;
display: none;
overflow-x: hidden;
}
.popout_navbar_align_center .menu_nav_inner {
padding-top: 60px;
}
**JAVASCRIPT: **
$("#sideNavId").on("click", function() {
if($(".popout_navbar_align_center").is(":visible"))
{
$(".popout_navbar_align_center").hide("slow");
}
else {
$(".popout_navbar_align_center").show("slow");
}
});
I've tried manipulating the css for the main content div but everything I've tried doesn't seem to work in regards to that approach. I'm not sure which divs properties should be manipulated to get the desired effect.
You can try to use the top and left css values along with position: absolute to achieve your popup not moving the rest of the content, but instead floating in front of it
I am trying to slide a navigational menu. I am using sliiide.min.js. The following settings work when I stay at the top of the page, but as I scrolls down and click to slide the menu it gives a blank white portion in the place of the actual menu, which I can't figure out how to sort out. If any of you experienced similar problems before, please kindly share. I am giving full code.
THE HTML MENU
<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
<div class="utility-nav">
<div class="main-menu">
<ul id="burger-menu" class="links clearfix">
<li class="menu-15461 first">
Follow Us On
</li>
<div class="utility-menu">
<ul id="hamburger-utility-menu" class="links clearfix">
<li class="menu-7731 first">
Facebook
</li>
Pinterest
</li>
</ul>
</div>
<li class="menu-15461 first" style="">
Sections
</li>
</ul>
</div>
<p>Men's Health, The Brand Men Live By</p>
<p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
<p>
Privacy Policy.
About Us.
</p>
</div>
</div>
HERE IS THE JS CONFIGURATION:
<?php $this->script()->captureStart(); ?>
var settings = {
toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
animation_duration: "0.1s", //how long it takes to slide the menu
place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
};
$('#tablet-mobile-menu').sliiide(settings); //initialize sliiide
<?php $this->script()->captureEnd(); ?>
HERE IS THE HTML WHERE THE CLICK OR TOGGLE BUTTON RESIDES:
<div id="menu-btn">
<a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
<!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
<!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
<span></span>
</a>
</div>
Perhaps the slider is there its just that its sitting at the top of the page so what your seeing is the bottom of the menu.
have you tried to add a CSS style to the top of the navigation so its sticks to the top of page even when scrolling.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM
Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example
You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/
How do I hide my navbar when the user clicks on the "bar-icon"?
I want to create a navbar which begins hidden and when the user clicks on the bar icon, the navbar displays
. Can you do that with JavaScript? Or do you need jQuery for that?
HTML
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Heading 1</h1>
</div>
</div>
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>
</div>
I'm just trying to figure out how I can hide the navbar, so no fancy-looking 3D effects when it displays is needed, (for now at least).
If I haven't provided enough information, please tell me so that I can provide the right amount of information needed to solve this.
Here is how to control that with a simple show and hide with basic javascript:
function openMenu(e){
document.getElementById('menu').style.display = 'block';
}
function closeMenu(e){
document.getElementById('menu').style.display = 'none';
}
https://jsfiddle.net/7xo87kz6/
You may use jQuery for this purpose.
Make sure to include jQuery in your project.
Jquery Part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bar").click(function(){
$(".bannerContainer").toggle();
});
});
</script>
HTML Part
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<div id = "bar">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</div>
</div>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>