I have something like this on my HTML page.
<html>
<body>
<div dojoType="dijit.layout.TabContainer" id="allTabContainer" style="width: 1150px; height: 490px" tabPosition="left-h" persist="true">
<div dojoType="dijit.layout.ContentPane" id="firstTab_id" title="firstTab" >Content 1</div>
<div dojoType="dijit.layout.ContentPane" id="secondTab_id" title="secondTab" >Content 2</div>
<div dojoType="dijit.layout.ContentPane" id="thirdTab_id" title="thirdTab" ><jsp:include flush="true" page="thirdTab_page.jsp"></jsp:include></div>
</div>
</body>
</html>
I have 3 buttons on the thirdTab_page.jsp which on clicking would call the below selectTab javascript function. Please check the code for the same.
<html>
<body>
<div dojoType="dijit.layout.BorderContainer" style="padding:10px; width: 50%;" id="borderCont">
<button dojoType="dijit.form.Button" type="submit" id="firstTab" onclick="selectTab(this.id);">Tab1</button>
<button dojoType="dijit.form.Button" type="submit" id="secondTab" onclick="selectTab(this.id);">Tab2</button>
<button dojoType="dijit.form.Button" type="submit" id="thirdTab" onclick="selectTab(this.id);">Tab3</button>
</div>
</body>
</html>
And then I have the javascript function which goes on like this.
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
function selectTab(tabId){
var correctTabId = tabId+"_id";
dijit.byId("allTabContainer").selectChild(correctTabId);
}
</script>
The tabContainer.selectChild doesn't seem to work in IE, but works perfect in Firefox. Please suggest if I have missed out something.
Thanks in advance.
Related
When a Bootstrap alert is shown, I want to stay until the user explicitly dismisses it. However, all my alerts vanish within 5 seconds. How do I change this behavior?
My current alert code:
<div class="alert alert-dismissible alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button><b>Error:</b> Error message...</div>
Tried removing both alert-dismissible class but that didn't help.
Try this:
$(document).ready(function() {
$('button').click(function() {
$('.alert').show()
});
$('button').click(function() {
$(this).parents('div').hide();
});
});
.alert {
display: none;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<button type="submit" class="btn btn-primary">Submit</button>
<div class="alert alert-dismissible alert-success">
<button type="button" class="close">×</button>
<strong>Completed!</strong> Form successfully submitted...
</div>
</body>
This seems to be the results of adding "alert" as a class. The following works for me:
<div style="padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px" class="alert-dismissible alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button><b>Error:</b> Error message...</div>
I need someone who knows materializecss to tell me is it possible to make this with materializecss? I googled but didnt find anything for materializecss.
So I am looking for somthing like in this example https://www.codeply.com/go/zAc3W2rzOd
Yes there is a way to slide divs in materializecss. You can actually find some examples at their website. Click here for the examples.
I simply copied one of their slider examples and pasted it into this jsfiddle and the section below.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css" />
</head>
<body>
<div class="container" style="padding-top:100px;">
<div class="carousel carousel-slider center" data-indicators="true">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white grey-text darken-text-2">button</a>
</div>
<div class="carousel-item red white-text" href="#one!">
<h2>First Panel</h2>
<p class="white-text">This is your first panel</p>
</div>
<div class="carousel-item amber white-text" href="#two!">
<h2>Second Panel</h2>
<p class="white-text">This is your second panel</p>
</div>
<div class="carousel-item green white-text" href="#three!">
<h2>Third Panel</h2>
<p class="white-text">This is your third panel</p>
</div>
<div class="carousel-item blue white-text" href="#four!">
<h2>Fourth Panel</h2>
<p class="white-text">This is your fourth panel</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.js"></script>
<script>
$('.carousel.carousel-slider').carousel({fullWidth: true});
</script>
</body>
</html>
In order to make these sliders work materializecss uses the jQuery plugin Carousel which also has some options.
I am developing a chrome extension and want to open an HTML page from content script as a bootstrap modal on the same page. How is it possible?
Your answer is a bit vague and you didn't provide any code which isn't the best to do.
But you can achieve this using iFrames
Your modal body would have somthing like <iframe src="https://www.w3schools.com"></iframe> in it.
All the information you'd need is on that site. But you'd possibly need to update some CSS to make it look good.
I created a full screen modal with scrollable iframe and when the modal active the body scroll capabilty has been disabale and when modal close scroll has been enable.I hope this will help. :)
<!DOCTYPE html>
<html>
<head>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="mybody">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal" onclick="disablebodyscroll()"> OOPEN A MODAL WITH IFRAME</button>
<div style="background-color: black; height: 800px;"></div>
<p>Copyright © 2017 Ace</p>
<!-- End of button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="enablebodyscroll()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="https://www.w3schools.com/" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" width="100%" height="100%" position="absolute" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal-body {
height: 500px;
min-height: 100%;
}
</style>
<script type="text/javascript">
function disablebodyscroll() {
document.getElementById("mybody").style.overflow = "hidden";
}
function enablebodyscroll() {
document.getElementById("mybody").style.overflow = "auto";
}
</script>
I am new to selenium and I have got this problem
This is the code
<document>
<html lang="en">
<head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0; background-color: #003e7e" role="navigation">
<div id="page-wrapper" style="min-height: 163px;">
<div id="content">
<div id="workArea">
<script type="text/javascript"> $(document).ready(function () { $('.linkdisabled').click(function (e) { e.preventDefault(); }); }); </script>
<div class="simpleForm">
<div>
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">TimeSheet</h3>
<h3>
<span class="link_button btn btn-primary" onclick="location.href= '/TimeSheet/Create'">Click to Add Sheet</span>
</h3>
</div>
</div>
<div class="row show-grid">
</div>
</div>
</div>
</div>
</div>
<div id="footer"/>
</body>
</html>
</document>
================================
And I want to click on this
Click to Add Sheet
Have tired almost all that is there in selenium to identify and click it but it didnt worked... please help
Does it work manually? are you able to click on the text??
Reference -> onclick="location.href='link.html'" does not load page in Safari
I have an issue with my Twitter Bootstrat Carousel. The 4 DIV elements which are supposed to appear one after the other all appear together, on top of each other.
I followed CreativityTuts.org tutorial and cannot see where I am wrong...
Here is the HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval:2000
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<center>
<div class="item active"><img src="bkk.png"></div>
<div class="item"><img src="brr.png"></div>
<div class="item"><img src="buu.png"></div>
<div class="item"><img src="btt.png"></div>
</center>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
</body>
</html>
My file structure is the following:
- bkk.png (and the 3 other images)
- css (file)
- fonts (file)
- js (file)
- carousel.js
- bootstrap.js
- bootstrap.min.js
- testcarousel.html
Can anyone help?
Thanks a lot in advance,
Paul
OK guys,
Thanks for your answers, it made me realize that I used code for Bootstrap 2, but actually using Bootstrap 3.
I found needed syntax here:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php