I am making an carousel by using owl Carousel. but it doesn't shows anything
this is my html code:
#{
Layout= null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="~/css/bootstrap.css">
<link href="~/css/owl.carousel.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="owl-carousel">
<div class="bg-info">Content 1</div>
<div class="bg-danger">Content 2</div>
<div class="bg-dark">Content 3</div>
<div class="bg-warning">Content 4</div>
<div class="bg-white">Content 5</div>
<div class="bg-success">Content 6</div>
<div class="bg-secondary">Content 7</div>
<div class="bg-dark">Content 8</div>
</div>
</div>
<script src="~/js/jquery-1.11.1.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/bootstrap.js"></script>
<script>
$(document).ready(function () {
$("owl-carousel").owlCarousel();
})
</script>
</body>
</html>
but it shows my nothing and the page is completely blank
why doesn't it show anything?
Errors inside the initialization script and any options added. Must be in that way:
<script>
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0 {items:1},
600:{items:3},
1000:{items:5}
}
});
});
</script>
Related
I've tried to use the waypoint library with jquery. I expected to see an alert when the user reaches the purple div. Quite oddly, it only works on the snippets in StackOverflow, but not locally.
Does anyone have an idea what is going on?
$(document).ready(function() {
console.log("document is ready!");
$('#purple').waypoint(function() {
alert('reached purple');
});
});
<!DOCTYPE html>
<html>
<head>
<!-- JQuery CDN !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- WayPoints CDN !-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js'></script>
</head>
<body>
<div style="background-color:blue;height:300px;width:auto" id="blue"></div>
<div style="background-color:red;height:300px;width:auto" id="red"></div>
<div style="background-color:green;height:300px;width:auto" id="green"></div>
<div style="background-color:yellow;height:300px;width:auto" id="yellow"></div>
<div style="background-color:purple;height:300px;width:auto" id="purple"></div>
<div style="background-color:pink;height:300px;width:auto" id="pink"></div>
</body>
</html>
The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.
I would like to use flexbox in Polymer to create tables out of divs.
But the main problem is that by "cells" squish because of the content inside it when I change the size of the puter div. In the example below, try resizing the browser window. How do I get it to obey the size defined by flex as first priority while still wrapping text?
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page'
});});
</script>
<base-page></base-page>
</body>
Thanks
Cheers
Adding this to your border class should solve the issue.
word-break: break-word;
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src='webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='polymer/polymer.html'>
<link rel='import' href='iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
word-break: break-word;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'base-page'
});
});
</script>
<base-page></base-page>
</body>
Consider this polymer-element
<polymer-element name="my-card" attributes="title content">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px"><h2>{{title}}</h2></div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">{{content}}</p></div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(){
alert('tapped!');
}
});
</script>
</polymer-element>
this is how I am using it
<my-card content="this is a test body" title="Here is a nice Title"></my-card>
it works but when I use html in the content attribute like
<my-card content="this is a test body <p>with paragraphs</p>" title="Here is a nice Title"></my-card>
they are handled like text, is there any way to pass HTML code to attribute and embed it in polymer-template
I think what you actually want is to use the <content></content> insertion point within your <template>, rather than creating an attribute named content and using variable interpolation.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<polymer-element name="my-card" attributes="title">
<template>
<div style="padding:20px; max-width:600px; margin:50px; margin-bottom:0px" on-tap={{cardTapped}}>
<paper-shadow z="1">
<div class="row">
<div class="col-xs-12" style="margin-top:-20px">
<h2>{{title}}</h2>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">
<content></content>
</div>
</div>
<paper-ripple fit></paper-ripple>
</paper-shadow>
</div>
</template>
<script>
Polymer({
cardTapped: function(e) {
console.log('tapped!', e);
}
});
</script>
</polymer-element>
<my-card title="Here is a nice Title">
this is a test body <p>with paragraphs</p>
</my-card>
</body>
</html>
I know this has been asked million times. I look at other topics for solution and so far I can't fix it.
I am using Masonry to develop grid system, like pinterest and google images. It works fine. The images load properly on the Firefox but in Chrome/Safari, they are overlapping until I refresh the page. Which is weird because images load fine on my iphone(until I refresh the page and they overlap).
Also I just noticed an error Firebug gives me in the imagesloaded script. This line.
} else if ( typeof obj.length === 'number' ) {
Here is my page setup.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Home page</title>
<meta name="description" content="description here" />
<link rel="stylesheet" href="css/global.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- external jQuery file to fall back on !-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<script>
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
</head>
<body>
<section id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 30, "itemSelector": ".item" }'>
<h1 class="hidden">Main Container</h1>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
</section>
</body>
</html>
So all in all, how do I fix this overlapping issue on refresh page?
ps. I should mention that in browsers, the images will overlap only when I refresh using
ctrl + f5. Normal refresh page doesn't stack up the images.
Alright the issue has been solved.
I added the following script and now it reloads fine.
<script>
$(window).load(function() {
var $container = $('#container');
$container.masonry({
itemSelector: '.item'
});
});
</script>