i got this code, and no matter what i do, the scroll spy won't work, can anyone shed some light into it? thanks in advance!
<div class='corpo effect8'>
<div class='esquerda'>
<div id="como-nav" class='como-menu'>
<div class="como-menu-topo">menu</div>
<ul class="como-menu-links">
<li class>introdução</li><div class="divisor-como"></div>
<li class>quem somos</li><div class="divisor-como"></div>
<li class>o que queremos</li><div class="divisor-como"></div>
<li class>coleta de dados</li><div class="divisor-como"></div>
<li class>ferramentas</li><div class="divisor-como"></div>
<li class>FAQ</li>
</ul>
</div>
</div>
<div id="como-texto" class="comofunciona" data-spy="scroll" data-target="#como-nav" data-offset="0">
<h3 id="intro">introdução</h3>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h3 id="quemsomos">quem somos</h3>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h3 id="queremos">o que queremos</h3>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h3 id="coletadedados">coleta de dados</h3>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h3 id="ferramentas">ferramentas</h3>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h3 id="faq">faq</h3>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
</div>
This is going to be tough to troubleshoot because you've only provided the markup for a div. Consider linking to a jsfiddle so we can get the complete picture.
When I was having issues with scrollspy it was because I had placed the js code up in the head instead of at the bottom of the body. Try placing
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
(or whatever version of BS you are using) just before closing the body tag.
Related
For context, I'm running a gatsby site with MDX enabled and I can't for the life of me, figure out how to get the URL to a Lottie JSON animation in the same folder as the MDX file (different from /src/pages/).
I'm not using templates other than rendering every page in the same component using gatsby-browser. The is defined as part of the component and the lottie-player library is included as part of the head.
Here's what I've defined the MDX file as -
---
title: Sample file
slug: /sample
order: 3
type: work
published: true
lastUpdatedDate: September 29, 2022
currentVerion: v2.0.0
excerpt: Sample excerpt text
roles:
- Product Manager
- Product Designer
specialUrl: /blog/foo
coverUrl: ./hero.json
headshot: ./headshot.jpeg
---
export const Head = (props) => <title>{props.pageContext.frontmatter.title + `- Portfolio`}</title>
import { BodyText } from "../../../components/Type"
import { PrimaryButton } from "../../../components/Button"
import HeadshotImg from "./headshot.jpeg"
# Sample project file
<BodyText>{props.pageContext.frontmatter.coverUrl.publicURL}</BodyText>
<BodyText>{props.pageContext.frontmatter.excerpt}</BodyText>
<lottie-player src="/static/23c130bba09d98c90f21287dfc6a9b1c/hero.json" background="transparent" speed="0.5" loop autoplay></lottie-player>
<img src={HeadshotImg} />
<PrimaryButton>Okay so this works</PrimaryButton>
Nihil accusantium aut assumenda est sed[^1]. Enim et eum corporis qui. Modi error laboriosam rerum recusandae impedit voluptate aut distinctio magni. Dolorem voluptatem sit non temporibus quibusdam ipsum. Accusantium voluptatem ut eaque numquam qui numquam est iste.
Voluptate consequatur soluta animi necessitatibus temporibus. Incidunt itaque magni. Eos quisquam similique dolorum occaecati accusantium. Quia voluptatum voluptatem laborum id odit est.
Cum ut non illum est nam ut magni totam. Voluptatibus voluptas magnam mollitia non ut est itaque harum. Et facilis at.
[^1]: Big note.
In the same folder as this MDX file, I've included hero.json. Using a graphQL query, I was able to determine the publicURL underneath the coverUrl object in the schema and included it explicitly here and the lottie renders correctly -
<lottie-player src="/static/23c130bba09d98c90f21287dfc6a9b1c/hero.json" background="transparent" speed="0.5" loop autoplay></lottie-player>
However, I'm not able to use props.pageContext.frontmatter.coverUrl.publicURL directly. This code doesn't display anything. Upon inspecting, there's nothing in between the <p> tags. (BodyText extends the p markup)
<BodyText>{props.pageContext.frontmatter.coverUrl.publicURL}</BodyText>
I tested the excerpt (next line between the <BodyText> tags) and it works correctly too.
What am I missing that the string response retrieved from the graphQL query is good enough for the Lottie src, but when used as a query directly as I do for other frontmatter objects, it doesn't render?
I feel I'm missing something really obvious, but it's taken me 4 hours of trying a lot of things but not getting anywhere. Many thanks in advance!
Is there a convention saying how long a line of comment should be?
Different line lengths will not work for any monitor size, or even font size, and other collaborators reading the code will have to scroll back and forth horizontally to read the entire line. I am wondering how this type of stuff is solved in the real world where people collaborate with other coders. Or is there some kind of auto formatter where people can change this kind of stuff on-the-fly to their own taste maybe?
For example:
/**
* Lorem ipsum dolor sit amet, consectetur
* adipisicing elit. Libero pariatur maxime
* praesentium. Similique qui, non aliquam
* nulla libero tenetur voluptatibus delectus,
* ex ab, aspernatur nam animi ipsa. Beatae
**/
versus:
/**
* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste magni optio
* impedit rem labore minima cumque quaerat corrupti suscipit dicta, possimus commodi
* laudantium ipsam, tenetur. Omnis qui, veritatis eligendi dignissimos rem quos
* voluptatum quaerat neque at excepturi quod fugit veniam sapiente sunt blanditiis,
* autem illum alias delectus illo, nostrum, dolore aspernatur culpa. Omnis ea deserunt,
* vero odio praesentium repellendus enim recusandae at temporibus officia, obcaecati
**/
(I apologise if this is the wrong stackexchange site to ask this, I honestly didn't know where to put it)
I'm trying to add swype support to my winjs applicaiton. It works great as long as the content has no scroll area. However as soon as the content overflows the page, the swype gestures don't work anymore.
If I set body { overflow-y: auto; } to hidden it works fine, but when there is a scrollbar, the swype gestures are not triggered anymore. Why?
Here is my sample:
<html>
<head>
<meta charset="utf-8" />
<title>PointerInput</title>
<link href="gestures.css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<link href="/css/ui-themed.css" rel="stylesheet" />
<link href="/css/default.css" rel="stylesheet" />
<style>
body {
overflow-y: auto;
}
</style>
<script>
$(function () {
$("body").swipe({
swipe: function (event, direction, distance, duration, fingerCount) {
$("#lastswype").text(direction);
}
});
});
</script>
</head>
<body>
<div class="TargetContainer" id="targetContainer">
<h1>Hello world</h1>
<h2>Last swype was: <span id="lastswype"></span></h2>
<div id="longText">
<p>
Lorem ipsum dolor sit amet, usu no illum petentium. Deterruisset definitiones reprehendunt eu mei. Cum falli volutpat at. Diceret splendide sed in. Sint noster deseruisse quo in. Vix nihil iisque dissentias at, harum facilis eu vel.
Pro eu dico decore consul. Ea posse incorrupte eam, ea affert verear dissentiunt eos. Mentitum intellegam at sit, stet repudiandae vel eu, sea error harum postea ut. Quod habeo tibique est an, vivendo salutatus pri an. Per tamquam tacimates in. Ut odio autem semper sed, cum ne quod aeterno praesent.
Ut oblique adversarium vis, et commodo discere eloquentiam eum, impetus tritani detracto ius ea. Ne sea expetenda deterruisset. Ea has populo ornatus feugait, assum voluptua interesset cum et. Mel ad aliquip periculis, ad eam vide altera splendide, alienum explicari ut mel. Qui laoreet tibique expetenda eu.
Mel nullam iuvaret ex, vix te tollit nullam. Illud quaestio reformidans cum et, et alia melius eam. Cum summo malorum ex. An decore nonumy appareat pro, alterum elaboraret concludaturque nec an. Ut vim aperiam oblique delectus. Duo et cibo labitur definiebas, ne affert rationibus sed, fuisset invenire vis ne.
Ad discere dolores accusata vix, aperiam vivendo cu vel, quo id nominavi dignissim temporibus. Nec summo democritum in, porro nominavi appareat nec cu. Similique ullamcorper vim ad, at epicuri phaedrum pri, est no alii facilis definitionem. Possim numquam et duo, quo an partem urbanitas, eu efficiendi scripserit vim. Ius putant dolores at, ut assum delenit definiebas sed. Tamquam fabellas sed at, ad ius quem affert nominavi, id elit oratio accusamus eam. Quando nostrum platonem vim ex, per ut tation nonumy assueverit.
Lorem ipsum dolor sit amet, usu no illum petentium. Deterruisset definitiones reprehendunt eu mei. Cum falli volutpat at. Diceret splendide sed in. Sint noster deseruisse quo in. Vix nihil iisque dissentias at, harum facilis eu vel.
Pro eu dico decore consul. Ea posse incorrupte eam, ea affert verear dissentiunt eos. Mentitum intellegam at sit, stet repudiandae vel eu, sea error harum postea ut. Quod habeo tibique est an, vivendo salutatus pri an. Per tamquam tacimates in. Ut odio autem semper sed, cum ne quod aeterno praesent.
Ut oblique adversarium vis, et commodo discere eloquentiam eum, impetus tritani detracto ius ea. Ne sea expetenda deterruisset. Ea has populo ornatus feugait, assum voluptua interesset cum et. Mel ad aliquip periculis, ad eam vide altera splendide, alienum explicari ut mel. Qui laoreet tibique expetenda eu.
Mel nullam iuvaret ex, vix te tollit nullam. Illud quaestio reformidans cum et, et alia melius eam. Cum summo malorum ex. An decore nonumy appareat pro, alterum elaboraret concludaturque nec an. Ut vim aperiam oblique delectus. Duo et cibo labitur definiebas, ne affert rationibus sed, fuisset invenire vis ne.
Ad discere dolores accusata vix, aperiam vivendo cu vel, quo id nominavi dignissim temporibus. Nec summo democritum in, porro nominavi appareat nec cu. Similique ullamcorper vim ad, at epicuri phaedrum pri, est no alii facilis definitionem. Possim numquam et duo, quo an partem urbanitas, eu efficiendi scripserit vim. Ius putant dolores at, ut assum delenit definiebas sed. Tamquam fabellas sed at, ad ius quem affert nominavi, id elit oratio accusamus eam. Quando nostrum platonem vim ex, per ut tation nonumy assueverit.
</p>
</div>
</div>
</body>
</html>
After some research, I found out that when an area has a scrolling area doesn't propergate touch events, if not specified otherwise. For eaxample, if an area has horzontal scrolling, I have to spezify, that vertical touch events are still allowed. This can be done with the touch-action property (http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx ).
This fixes my problem:
<style>
body {
overflow-y: auto;
touch-action: pan-x:
}
</style>
I've created a layout with Maqetta. Now I want to add the logic to the layout. Therefore I have downloaded the whole workspace from Maqetta and imported the files/libaries into a new Rails project. At first I had some problems, that Rails didn't loaded the dojo,js file, but I've solved that problem.
Now I have another problem. The page won't render. I've commented everything out except one widget (a button) and this works fine. But if I undo this, nothing happens. Unfortunately I also don't get any warnings/errors or anything like that from dojo.
After a little bit trying, I changed the parseOnLoad property and now I get a warning:
Unhandled Error: Tried to register widget with id==appLayout but that id is already registered
Here is the include tag:
<%= javascript_include_tag "lib/dojo/dojo/dojo", :'data-dojo-config' => "'async':true,
'packages':[{'name':'maqetta','location':'../../maqetta'},{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'shapes','location':'../../shapes'},
{'name':'maqettaSamples','location':'../../../samples'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}]" %>
Here is the HTML part (I have simplified it, and now I'm just useing the example from the tutorial):
<body class="claro" data-maq-flow-layout="true" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
<input type="button" data-dojo-type="dijit.form.Button" intermediateChanges="false" label="Search" iconClass="dijitNoIcon" onclick="alert('hi');"></input>
<div
id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'">
<div
class="centerPanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">
<div>
<h4>Group 1 Content</h4>
<p>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.</p>
</div>
<div>
<h4>Group 2 Content</h4>
</div>
<div>
<h4>Group 3 Content</h4>
</div>
</div>
<div
class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'top'">Header content (top)</div>
<div
id="leftCol" class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
</div>
And here is the parser:
require(["dojo/parser","dojo/domReady!"], function(parser){
parser.parse();
});
I'm trying for hours now, and I'm still as clueless as at the beginning. Has somebody an idea what I can try?
Unhandled Error: Tried to register widget with id==appLayout but that id is already registered
This error is because you are parsing twice. Once on load and second in the require statement. The second parse will try registering a second widget with the same id, thus the error.
Remove one of the parsing calls and give the border container a specific width and height.
<div id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'"
style="width: 800px; height: 400px">
See http://livedocs.dojotoolkit.org/dijit/layout/BorderContainer#setting-sizes, the closest parent for which hasLayout is true (e.g. position:relative) must have a width+height set. Also, set width+height for BorderContainer.
I use this jquery plugin for "see more" text:
http://keith-wood.name/moreRef.html
I save from tinymce editor html text into mysql database. Then I display html text in a php page, and I use "see more" text jquery plugin for show only 100 words of text.
My problem is that that plugin doesn't retain html formatted text, but it changes html formatted text into simple text, it remove html tag.
How can I retain text with html tag for display formatting text properly and have also "see more" link?
You can do it with pure css and keep the html in place. Here is a JS fiddle (less and more will not be displayed on IE6,7,8 and the content will be expanded)
http://jsfiddle.net/6sj4e/45/
.text {
height: 50px;
overflow: hidden;
height: 100%\9;
}
input.less-more,
input.less-more:checked ~ label.more,
input.less-more:not(:checked) ~ label.less {
display: none;
}
and the html :
<input id="chbox" class="less-more" type="checkbox">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
<label for="chbox" class='more'>more</label>
<label for="chbox" class='less'>less</label>