I am trying to implement a bootstrap affixed navbar. Everything seemed to be functioning as expected, however a strange issue is occurring in google chrome. When you scroll by the navbar in such a way that one of the mousewheel events fires on the navbar as it affixes, the scrollwheel completely stops functioning until some other mouse input such as a movement or a click occurs.
This can be easily reproduced by just directly copying the w3schools affix example into an html document and opening it in chrome. If you place the mouse at the top of the screen and attempt to scroll down, it will catch. Any mouse movement restores scrolling but it makes navigating the page far clunkier. Ive copied the exact code below (unedited from w3schools).
The issue does not appear to occur in either firefox, edge, or IE. The issue also does not occur on the actual w3schools website, or testing services. I believe this is due to some of the interaction from wrapping the code in an iframe
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:2000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
Related
Here there is an example of my problem:
http://asdcastelli.altervista.org/test-bootstrap/
In the head i have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but the responsive works only if i resize the window browser, not in mobile
Why?
This is the page in the resized windows browser
This is the page in the mobile view (chrome inspector)
You have to include table into a div.
<div class="responsive_table">
<table id="pubblicazioni_table">
/*your content*/
</table>
</div>
and on your css, you have to paste this line:
.responsive_table { overflow-x: scroll; width: 100%; }
Is it allowed if tooltip is not having an href component?
Here is my code :
<a data-toggle="tooltip" title="Please click on map of your precise location"><i class="fi flaticon-question"></i></a>
I removed the href because if I click on the tooltip, the web goes to top of the page (on mobile screen). Is there any other best practice for this?
Does it have to be an anchor at all? You should be able to just do something along the lines of.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<i class="glyphicon glyphicon-question-sign"
data-toggle="tooltip"
data-placement="bottom"
title="Contextual help for mouse/touch users">
</i>
<span class="sr-only">Contextual Help for Screen Readers</span>
Unless you're help icon should go somewhere it probably shouldn't be an anchor. The only thing I've added is the sr-only block which will allow screen readers to read out your contextual help.
Alternatively you can make sure that the anchor doesn't move the page by attaching an event to it and preventing the default behaviour.
//untested!
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
//comment the following line out to see page move on click
$('a[data-toggle="tooltip"]').click(function(e){e.preventDefault()})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/><br/><br/>Your icon is below here to show the lack of scrolling<br/><br/><br/><br/><br/><br/><br/>Keep going...<br/><br/><br/><br/><br/><br/><br/><br/><br/>Just a little more<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#" data-toggle="tooltip"
title="Please click on map of your precise location">
<i class="glyphicon glyphicon-question-sign"></i>
</a>
I am trying to enter some text in text-box which is inside iframe. I am able to identify the text-box by switching to iframe, but not able to type in text.
Here, is the html code:
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" style="width: 100%; height: 100%;" aria-describedby="cke_50" title="Rich Text Editor,missionStatementText" src="" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title data-cke-title="Rich Text Editor,missionStatementText">Rich Text Editor,missionStatementText</title>
<style data-cke-temp="1">
<link href="http://localhost:8080/sowodemo/js/ckeditor/contents.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1">
</head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="false">
http://l
<br type="_moz">
</body>
</html>
</iframe>
My Selenium Code:
driver.switchTo().frame(driver.findElement(By.tagName("iframe")));
driver.findElement(By.tagName("body")).clear();
driver.findElement(By.tagName("body")).sendKeys("type text");
driver.switchTo().defaultContent();
try to use actions class, we got success when we have used actions class
WebElement we = driver.findElement(By.xpath("xpath of the element"));
new Actions(driver).moveToElement(we).click().sendKeys("bfsdjkf").build().perform();
How to restrict the webbrowser control bouncy behaviour (white space is seen while scrolling up and down). Please refer the screenshot below.
There doesn't appear to be a way to disable the 'bounce in the WP7 or WP8 WebBrowser control.
But the issue you're seeing can be fixed with a small bit of CSS. Simply apply a background-color to the BODY of the document..
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {background: black}
#content {background: black}
p {color:white}
</style>
</head>
<body>
<div id="content">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</body>
</html>
all I have a tabContainer with tiltes(Label) and what I need to achieve is when a tabbed is clicked I want the color to be changed to red or whatever meaning is active and the remaining unactive tab stay maybe black the default color. I have tried searching on the web and the only solution I see is css with class .tabLabel{color: Red;} which changes all the tab title to red also tried the onShow event of which can respond alert event but not the stylesheet. Also if you have the id in the tabcontainer and apply css with dojo javascript it changes the content in the tab not the title. Here a sample code I got fromm dojo to show what I want to achieve.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../../_static/js/dojo/../dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script><script src='../../_static/js/dojo/dojo.js'></script><script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>
</head>
<body class="claro">
<div style="width: 350px; height: 300px">
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
</div>
</body>
</html>
From the above code I want to make title="My first tab" active with a different color of the text and other tabs at default color and when My second tab is clicked make it active and do the same action as the first kind of menu links on a website.
Please help. Thanks
You can change text color of the active tab by adding this class.
.dijitChecked.dijitTab .tabLabel {
color:red;
}
Here is an example.