Can anybody construct a jsfiddle where a dojox.mobile.Heading is positioned with fixed="bottom"?
If I write the following Code (example from here), the bottom Heading is not positioned bottom.
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">View Header Bar</h1>
<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">View Footer Bar</h1>
</div>
This one is working for me (http://jsfiddle.net/G8QkC/53/):
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/mobile/deviceTheme.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dojox/mobile/ScrollableView",
"dojox/mobile/Heading"], null);
</script>
</head>
<body>
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">View Header Bar</h1>
<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">View Footer Bar</h1>
</div>
</body>
Related
I have a simple row and 4 columns in there. it displays in one row as long as screen size is MD and above. I wanted to hide these columns so I have added two bootstrap classes in the row that are "d-none d-md-block" as per the documentation it should hide as soon as screen size goes below md.
But the output is weird, for some reason, my columns are not in one row anymore but it displays one below another.
any help??
here is the code, columns should be in one row as long as the screen size is larger than md.
<div class="d-none d-md-block row">
<div class="col-md-3">
<div>1</div>
</div>
<div class="col-md-3">
<div>2</div>
</div>
<div class="col-md-3">
<div>3</div>
</div>
<div class="col-md-3">
<div>4</div>
</div>
</div>
This is it:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="d-none d-sm-block">
<div class="row">
<div class="col">1</div>
<div class=" col ">2</div>
<div class=" col">3</div>
<div class=" col">4</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
you can check : https://jsfiddle.net/sugandhnikhil/muxt6eg1/
Just change d-md-block to d-md-flex and it'll work because by default row has display:flex property in Bootstrap and you are assigning it display:block property
<div class="d-none d-md-flex row">
<div class="col-md-3">
<div>1</div>
</div>
<div class="col-md-3">
<div>2</div>
</div>
<div class="col-md-3">
<div>3</div>
</div>
<div class="col-md-3">
<div>4</div>
</div>
</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 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
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.