I am trying to get all of the slides in my orbit slider to be the height of the largest slide.
Here is my markup:
$(document).ready(function(){
$('.orbit-container').equalize('outerHeight');
});
<div class="orbit" data-orbit="" role="region" data-auto-play="false" data-resize="7sdsk0-orbit" id="7sdsk0-orbit" data-t="3k1v70-t"><button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀︎</button><button class="orbit-next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶︎</button><div class="orbit-wrapper">
<ul class="orbit-container" data-options="bullets: true; autoPlay:false;" data-auto-play="false" data-equalizer="" data-equalize-on-stack="true" data-equalize-by-row="true" data-resize="lo2q16-eq" data-mutate="k2tsn5-eq" data-t="fgxh6n-t" tabindex="0" style="height: 0px;" data-events="mutate">
<li data-equalizer-watch class="orbit-slide" data-slide="0">
<div>
<div class="text-container">
<h1>Arthritis. Give Before it takes.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Homepage%20Billboards/mobile-cropped.jpg?ext=.jpg">
</div>
</li>
<li data-equalizer-watch class="orbit-slide is-active" data-slide="1" aria-live="polite">
<div>
<div class="text-container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Test%20Images/rough-mobile.jpg?ext=.jpg">
</div>
</li>
</ul>
</div>
On each li, an inline style is being applied of height="auto", so the slides are different heights. Even if I call that function after the window has loaded, it has the same effect.
Am I missing something?
Related
I am writing my backend using DRF and using VueJS frontend templates. In the admin panel I use Ckeditor to edit textfield.
class ArticleModelForm(forms.ModelForm):
content = forms.CharField(widget=CKEditorUploadingWidget)
class Meta:
model=Article
fields = [ "title", "slug" "published_at"]
While rendering a post TextField I can not use template filters to render correctly, so text seems ruined. I have tried lots of things but no success yet.
<template>
<div>
<div class="container negative-margin-top150">
<div class="col col-xl-8 m-auto col-lg-12 col-md-12 col-sm-12 col-12">
<div class="ui-block">
<!-- Single Post -->
<article class="hentry blog-post single-post single-post-v1">
<div class="post-content-wrap">
<div class="post-content" >
<p class="post-paragraph">
{{article.content}}
</p>
<p>{{content}}</p>
</div>
</div>
</article>
<!-- ... end Single Post -->
</div>
</div>
</div>
</div>
</template>
and my script is below
<script>
import axios from 'axios';
export default {
name: "Article",
props: {
slug: {
type: String,
required: true
}
},
data() {
return {
article: {},
content: `${content}`,
}
},
methods: {
setPageTitle(title) {
document.title = title;
},
setRequestUser() {
this.requestUser = window.localStorage.getItem("username");
},
getArticle(slug) {
axios.get(`http://localhost:8000/api/articles/${this.slug}`)
.then(response => {
this.article = response.data;
this.setPageTitle(response.data.title);
this.content = window.content;
});
}
},
created() {
this.getArticle();
this.setRequestUser();
},
};
</script>
Now in the browser my text is rendered with template tags
<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
Anybody here who can point me in the right direction?
You need to use v-html attribute to render raw conent.
https://v2.vuejs.org/v2/guide/syntax.html
I'm using ZURB Foundation (v6) Accordions.
When an accordion opens, I want to scroll the page to be at the top of that accordion item. I can run this code:
$("#arf").on("down.zf.accordion", function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 'slow');
});
Of course, this scrolls the page to the top of the accordion, not the accordion item. How would I modify this code to scroll to the accordion's item when it opens?
Here is the solution that I found that works. This works for version 6 of Foundation for Sites.
$("#form-selector").on("up.zf.accordion", function(event) {
setTimeout(function(){
$('html,body').animate({scrollTop: $('.is-active').offset().top}, 'slow');
}, 250); //Adjust to match slideSpeed
});
The setTimeout is used because of the slideSpeed of the accordion. If you do not use setTimeout it scrolls the moment down.zf.accordion fires thus scrolling to the wrong position.
You can also us down.zf.accordion in place of up.zf.accordion, however, if you use down.zf.accordion, it will fire once the page loads (as the accordion is initialized and opens) and scrolls to the accordion item. This is unwanted in my case but may be desired in certain case.
You could attach your own click listeners to each accordion <a> tag and scroll to the top of that tag on click. Eg.
JS
$('.accordionBtn').on('click', function(event) {
$('html,body').animate({scrollTop: $(event.target).offset().top}, 'slow');
});)
CSS
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel1a">Accordion 1</a>
<div id="panel1a" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel2a">Accordion 2</a>
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel3a">Accordion 3</a>
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
I first used the solution posted by #L84 then I thought of this one.
In the code below, $active references the currently active accordion item (Note: the reference is stored each time an accordion is opened rather than when the accordion title is clicked). When a new title is clicked, $active is the item that will be closed. We need to know its height in advance.
For the newly active accordion item to be properly positioned, the height of that previously active item has to be subtracted from the viewport's scrolling position -- note that this in necessary only if the newly active item is located further down.
$(function () {
var $active;
$(".accordion").on("click", ".accordion-title", function () {
var itemIndexNew = $(".accordion-item").index($(this).parent());
var itemIndexOld = ($active ? $(".accordion-item").index($active) : null);
if (itemIndexOld !== null && itemIndexOld < itemIndexNew) {
$("html, body").scrollTop($(window).scrollTop() - $active.height());
}
});
$(".accordion").on("down.zf.accordion", function(e) {
$active = $(".accordion").find(".accordion-item.is-active");
});
$(document).foundation();
});
You could use the below script, im also using foundation 6 accordion, this will work also if you have multiple accordions on single page. Thanks
jQuery(".accordion-title").click(function() {
var $this = this;
setTimeout(function(){
jQuery('html,body').animate({scrollTop: jQuery($this).closest('.accordion').find('.is-active').offset().top}, 'slow');
}, 250);
});
I try to understand how Ember works and I have an issue I can't understand. I am following a tutorial (guides.emberjs.com/v1.10.0/) and I don't understand why I only see an element when I go on a page when I click (and doesn't work with a direct link).
I think some screenshots will be helpful to understand my issue.
This is what I have when I visit "index.html#/posts/1". No article is displayed.
http://i.stack.imgur.com/qzwlq.png
This is what I have when I visit "index.html#/posts" and then click on Rails is Omakase on the left. An article is displayed whereas the link is on my browser is "index.html#/posts/1" (and when I refresh nothing is displayed).
http://i.stack.imgur.com/YpmzX.png
This is my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blog tuto</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Bloggr</a>
<ul class="nav">
<li>{{#link-to "posts.index"}}Posts{{/link-to}}</li>
<li>{{#link-to "about"}}About{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="about">
<p>
Lorem ipsum about
</p>
</script>
<script type="text/x-handlebars" id="posts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<table class="table">
<thead>
<tr><th>Recent Posts</th></tr>
</thead>
{{#each post in model}}
<tr>
{{#link-to "posts.post" post}}
<td>{{post.title}} <small class="muted">by {{post.author}}</small></td>
{{/link-to}}
</tr>
{{/each}}
</table>
</div>
<div class="span8">
{{outlet}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="posts/post">
{{#if isEditing}}
{{partial "post/edit"}}
<button {{action "doneEditing"}}>Done</button>
{{else}}
<button {{action "edit"}}>Edit</button>
{{/if}}
<h1>{{title}}</h1>
<h2><small class="muted">by {{author}}</small></h2>
<hr>
<div class="intro">
{{exerpt}}
</div>
<div class="below-the-fold">
{{body}}
</div>
</script>
<script type="text/x-handlebars" id="post/edit">
<p>{{input type="text" value=title}}</p>
<p>{{input type="text" value=exerpt}}</p>
<p>{{textarea value=body}}</p>
</script>
<script src="../js/libs/jquery.min.js"></script>
<script src="../js/libs/handlebars.js"></script>
<script src="../js/libs/ember.js"></script>
<script src="../js/libs/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="app.js"></script>
</body>
</html>
And app.js
App = Ember.Application.create();
App.Router.map(function() {
this.route('about');
this.resource('posts', function () {
this.route('post', {path: ':post_id'});
});
});
App.PostsRoute = Ember.Route.extend({
model: function () {
return posts;
}
});
App.PostsPostRoute = Ember.Route.extend({
model: function (params) {
return posts.findBy('id', params.post_id);
}
});
App.PostsPostController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function () {
this.set('isEditing', true);
},
doneEditing: function () {
this.set('isEditing', false);
}
}
});
var posts = [{
id: 1,
title: "Rails is Omakase",
author: "mc100s",
date: new Date('08-06-2015'),
exerpt: "Lorem ipsum dolor sit amet",
body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}, {
id: 2,
title: "The Parley Letter",
author: "mc100s",
date: new Date('08-06-2015'),
exerpt: "Duis aute irure dolor in reprehenderit",
body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}];
Thank you for your help
When you click link, model is passed directly to the route and route's model hook is not fired, so you see article. When you reload route model hook is fired and something goes wrong.
Make string id, because params.post_id is String.
findBy is Ember.Array method. http://emberjs.com/api/classes/Ember.Array.html#method_findBy
I would try:
var posts = Ember.A([{
// as is
}]);
Next change ObjectController to Controller (ObjectController is deprecated) and use {{model.title}} instead of {{title}} in template:
<script type="text/x-handlebars" id="posts/post">
{{#if isEditing}}
{{partial "post/edit"}}
<button {{action "doneEditing"}}>Done</button>
{{else}}
<button {{action "edit"}}>Edit</button>
{{/if}}
<h1>{{model.title}}</h1>
<h2><small class="muted">by {{model.author}}</small></h2>
<hr>
<div class="intro">
{{model.exerpt}}
</div>
<div class="below-the-fold">
{{model.body}}
</div>
working jsbin here: http://jsbin.com/pozabixeka/edit?html,js,output
I have html content which look like this:
html code ... </div>content1</div> html code ...
html code ... </div>content2</div> html code ...
and I would like to extract the content1/2/3... from the HTML as content1 new line content2 new line content3 any idea ? Thanks in advance.
Here's an example using Mojo::DOM, inspired by this StackOverflow answer:
#!/usr/bin/env perl
use strict ;
use warnings ;
use Mojo::DOM ;
my $html = <<EOHTML;
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML with 2 divs</title>
</head>
<body>
<div>
Four score and seven years ago our fathers brought forth on this
continent a new nation, conceived in liberty, and dedicated to the
proposition that all men are created equal.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
EOHTML
my $dom = Mojo::DOM->new ;
$dom->parse( $html ) ;
for my $div ( $dom->find( 'div' )->each ) {
print $div->all_text . "\n" ;
}
The output is:
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How do I short an text in django? For example:
I have this text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
And I want to get:
Lorem ipsum dolor sit amet, consectetur adipisicing elit(more)
Where "(more)" is a link to show the entire text.
Can someone help me? Thank you very much in advance!
Have you tried the template tag truncatechars?
{{ value|truncatechars:[number to truncate chars after] }}
Check out how you'd handle the (more) part here:
If you actually wanted a link to persist and not just hover, you would probably want to use javascript to manipulate your DOM.
Make sure 15 (this is arbitrary) is greater than the number you're slicing by:
{% if value|length > 15 %}
{{ value|slice:"-6" }}(more)
{% else %}
{{ value }}
{% endif %}