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
Related
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.
Can anybody tell me how to set up Font Awesome to work with a theme?
I have put this in my template file:
<div id="social-media-bar" class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2">
<i class="fa fa-linkedin-square fa-3" aria-hidden="true"></i>
</div>
<div class="col-md-2">
<i class="fa fa-facebook-square fa-3" aria-hidden="true"></i>
</div>
<div class="col-md-2">
<i class="fa fa-xing-square fa-3" aria-hidden="true"></i>
</div>
<div class="col-md-2">
<i class="fa fa-twitter-square fa-3" aria-hidden="true"></i>
</div>
</div>
</div>
But there are no icons loaded. They aren't loaded in admin mode either but the IP menus have their FA icons as they should.
What am I doing wrong? Are some LESS entries necessary in my theme?
Think I got it - I just have added this line to theme.less:
#import "/Ip/Internal/Core/assets/admin/font-awesome/font-awesome.less";
I have used Bootstraps CDN in the head now:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Best way to add css in Impresspages is by using ipAddCSS in you theme header before ipHead(). Thats the same way you can add css to plugins.
For example:
<head>
<?php ipAddCss('Theme/AHS/assets/ahs.css'); ?>
<?php echo ipHead(); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
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 this code and it doesn't work in responsive mode. I mean the button will appear, but when I click on the button my navbar does not appear. I have no idea what is it about. css and js file is also added to document but it still doesn't work. Any tips for this problem will appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ------------------------------bootstrap css link--------------------- -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/custom-css.css">
</head>
<body>
<div class="row">
<div class="col-md-12 top-site">
<div class="top-bg col-md-12">
</div>
<!-- <div class="col-md-2 social">
</div>
<div class="col-md-2 search">
</div> -->
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li>خانه</li>
<li>تماس با ما</li>
<li>لینک به ما</li>
<li>درباره ما</li>
<li>تبلیغات در سایت</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
<!-- ------------------------------bootstrap css link--------------------- -->
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="npm.js"></script>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
</body>
</html>
jQuery library should be included before bootstrap.
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
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>