i'm trying to use the animation 'bounceslide' but I'm not seeing any bounce! Any ideas - I'm pretty new to jQuery.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/effects.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true,
active:false,
animated: 'bounceslide'
});
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
.demo {
width:750px;
margin: 0 auto;
}
h3+div{
background: rgba(0,0,0,.2);
padding:4px;
}
h3 {
background:#4495D1 url(alert-overlay.png) 0% 0% repeat-x;
cursor: pointer;
outline: none;
padding: 10px;
}
h3:hover {
background-color: #555;
}
h3 a {
color: white;
text-decoration: none;
}
</style>
</head>
<div class="demo">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div><!-- End demo -->
It works when you select a container above the container that is expanded. I assume this is the standard behaviour.
I know this is an old question that you've probably long since figured out, but I was running into nearly this exact problem today, so I created a working example here. I removed some of your styling for width and other minor changes, but changed very little to your original work so I suspect you were running on IE which does not show animations at all. At least now if someone else comes across this question they can find a working example.
Related
I'm trying to make a web page that starts with a image next to some text. I got that to work but when I try to put content under that it works on desktop but when the columns get stacked the content below covers the second column. I don't do a heap of web design so this might be a easy fix.
Here are some images:
These images are scrolled down the image fill the whole viewport.
Working on desktop
Not working when stacked
Here is my code:
index.html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/style.css" rel="stylesheet">
<title>Name</title>
</head>
<body>
<div class="container-fluid">
<div class="row vh-100">
<div id="welcomeImg" class="col-lg-4 h-100 welcomeImg" style="background-image: url('https://via.placeholder.com/1080x1920?text=Image');">
<div class="h-100" id="mobileOverlay">
<div class='icon-scroll'></div>
</div>
</div>
<div class="col-lg-8">
<h3>text</h3>
</div>
</div>
<div>
<h1>Content</h1>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Malesuada pellentesque elit eget gravida cum sociis. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Consequat semper viverra nam libero.</h5>
</div>
</div>
<!--Scripts-->
<!-- BootStrap -->
<script src="vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Others -->
<script src="resources\js\reactive.js"></script><!--This is just a script that hides the mobileOverlay div if the display is over a certain size. The issue still happends with this removed-->
</body>
</html>
style.css
body, html {
height: 100%;
}
.welcomeImg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* A scroll animation by Khalil Benihoud on code pen https://codepen.io/khalilbenihoud/pen/wBJVLK */
.icon-scroll,
.icon-scroll:before {
position: absolute;
left: 50%;
}
.icon-scroll {
width: 40px;
height: 70px;
margin-left: -20px;
top: 80%;
margin-top: -35px;
box-shadow: inset 0 0 0 1px #fff;
border-radius: 25px;
}
.icon-scroll:before {
content: '';
width: 8px;
height: 8px;
background: #fff;
margin-left: -4px;
top: 8px;
border-radius: 4px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(46px);
}
}
#keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(46px);
}
}
Just take away the vh-100 class from the row and give it to the div with the id welcomeImg instead of the h-100 class. This should do the trick.
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeImg" class="col-lg-4 vh-100 welcomeImg" style="background-image: url('https://via.placeholder.com/1080x1920?text=Image');">
<div class="h-100" id="mobileOverlay">
<div class='icon-scroll'></div>
</div>
</div>
<div class="col-lg-8">
<h3>text</h3>
</div>
</div>
<div>
<h1>Content</h1>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Malesuada pellentesque elit eget gravida cum sociis. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Consequat semper viverra nam libero.</h5>
</div>
</div>
</body>
I want my form fields to look right. However, the hint text of a first field intersects the second field below it and the text appears dirty. My goal is to separate these overlapping texts.But I haven't found a solution yet. How can I solve this problem?
I don't want the form to look like in the picture.
Edit: I'm using the method suggested on his Angular official site.
https://stackblitz.com/angular/lnkmogrbgry?file=app%2Fform-field-overview-example.ts
Edit 2:
userform.component.html
<div class="col-lg-8 mx-auto mt-5">
<mat-card class="fullbar">
<div class="card-header-bar">
New User Form!
</div>
<mat-card-content class="mt-3 card-content-bar">
<form [formGroup]="userGroup">
<mat-form-field class="full-width">
<input matInput placeholder="Username" formControlName="username">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Password" formControlName="password">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Age" formControlName="age">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
</div>
userform.component.css
.fullbar {
padding: 0px;
margin: 0px;
margin-top: 75px;
margin-bottom: 225px;
}
.card-header-bar {
line-height: 50px;
height: 50px;
max-height: 50px;
vertical-align: middle;
padding-left: 15px;
color: rgba(0, 0, 0, .54);
background-color: #e7e5f7;
}
.card-content-bar {
padding: 15px;
}
.full-width {
width: 100%;
}
I guess you need to set height of mat-form-field to auto.
I am building a site with an off canvas menu just looked at it on an iphone 3 and 4 via Browser Stack but when I click on the nav trigger icon the menu isn't sliding in from the right, or should I say the main content isn't sliding to the left to reveal the menu. It's working on the 4S and above so it seems it won't work on iOS 3, 4 and 5 but does on 6 and above
I've used the auto prefixer in Brackets which added the webkit prefix but that still didn't work.
I'd greatly appreciate any help.
Here's the code:
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<div class="nav-trigger-container">
<label class="ion-navicon" for="nav-trigger"></label>
</div>
<!-- HERO BOX -->
<div class="site-wrap">
<header>
<div class="row">
<div class="hero-text-box">
<h1>Creative zest</h1>
<h2>for print & web.</h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper, enim in fermentum facilisis, enim sem sollicitudin leo, ut tincidunt eros dui eget felis.</p></blockquote>
<cite>Sheryn Moore » Implementation Manager » Wesleyan brand refesh</cite>
</div>
</div>
</header>
<!-- ABOUT ME -->
<section class="freelance-graphic-designer-marc-lemmon">
<div class="row">
<h2>Senior Creative Design Consultant<br/>
& UI Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non diam mollis, mollis dui nec, molestie massa. Ut consectetur tempor nunc vitae interdum. Fusce vel diam ac tortor auctor commodo non ut metus. Donec sollicitudin augue pretium, semper nisi vitae, ultrices diam. </p>
</div>
</section>
**CSS**
/* ----- Moving the nav trigger to the right when it is clicked ----- */
.nav-trigger:checked + label {
right: 220px;
}
/* ----- Moving the content wrapper to the right when menu icon is clicked ----- */
.nav-trigger:checked ~ .site-wrap {
right: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
/* ----- Creating the smooth slide action ----- */
.nav-trigger + label, .site-wrap {
-webkit-transition: right 0.2s;
transition: right 0.2s;
}
Thanks in advance.
Marc
Does the transition property that you are animating "right" have a defined starting value for the 'label' and 'site-wrap' elements? When you are trying to transition the right/left properties you need to also define it's default starting value, otherwise it will default to 'auto'.
Maybe this will fix it:
.nav-trigger + label, .site-wrap {
-webkit-transition: right 0.2s;
transition: right 0.2s;
right:0;
}
I am working on an ASP.NET MVC 5 project and using Rotativa to generate PDF documents from Razor views.
I can't seem to get Rotativa to render the the view properly using Bootstrap styling. I'm trying to style the view using the simple grid layout that Bootstrap does so well. Nothing too fancy.
Here is a screenshot of my Razor View:
Here is a screen shot of the PDF:
And here is my view's content:
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Has any one else been able to get this working?
I had a same issue.
Try to use col-xs-# instead col-md-# / col-sm-#, that works for me perfectly.
You should set correct page size and take care of resolution and Bootstrap breakpoints when shrinking browser window.
From the screenshot I can see the you get mobile output when converted to PDF; that means Bootstrap has detected small page size and it adjusts style accordingly. Default Rotativa page size is A4, I think.
I have found a workaround here.
After html
<div class="row printDetails">
<div class="col-5" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
you should make a css class to display inline block. So in your case:
.printDetails > div {
display: inline-block;
}
Also notice the row amount is 5 and 6 or 5 and 5 depending on the page size, some of the width goes for pdf size margin which is weird why it doesn't get the exact size as mobile version which is taking Rotativa.
Hope it helps someone.
Update
As #Erdogan replied, and after checking his link I tested the code that he probably thought I have to check.. I'm referencing here the code:
just added a CSS class at the same level as uk-grid called "flexrow" and another one for my divs.
.flexrow {
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
}
.flexrow > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
Got this: Here in some of the comments
For bootstrap 3, Do the following:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
For bootstrap 4, Do the following:
<div class="col-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
For bootstrap4 add the following styles
.flexrow {
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
}
.flexrow > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
Then add flexrow beside each row class in the HTML
<div class="row flexrow"> </div>
Thanks to link
I using TinyMCE in ASP.NET MVC 3 but I think this is not a problem.
Error:
jquery-1.9.0.min.js:3Uncaught ReferenceError: tinyMCE is not defined
localhost:67678/Scripts/jquery-1.9.0.min.js
<!-- TinyMCE -->
<script type="text/javascript" src="~/Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
<!-- /TinyMCE -->
<h3>
Simple theme example</h3>
<p>
This page shows you the simple theme and it's core functionality you can extend
it by changing the code use the advanced theme if you need to configure/add more
buttons etc. There are more examples on how to use TinyMCE in the <a href="http://tinymce.moxiecode.com/examples/">
Wiki</a>.
</p>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<p>
This is some example text that you can edit inside the <strong>TinyMCE editor</strong>.
</p>
<p>
Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit amet id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.
</p>
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<script type="text/javascript">
if (document.location.protocol == 'file:') {
alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
Image:
fixed:
this is working
../../Scripts/tiny_mce/tiny_mce.js
my question is why this does not work? and why VS 2010 doesn`t show error with path?
~/Scripts/tiny_mce/tiny_mce.js
Correct Answer -> ../../Scripts/tiny_mce/tiny_mce.js