First, example js code:
$(function(){
$('body').click(function(){alert('body clicked');});
$('body').on('click','.post-header',function(e){
e.stopPropagation();
$(this).next('.post-content').slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="post-wrapper">
<h2 class="post-header">Lorem Ipsum</h2>
<div class="post-content">
<p>Lorem Ipsum is simply dummy text of....</p>
</div>
</div>
</body>
My question is, if e.stopPropogation() kills the bubbling towards body, how come the click event hits the body and triggers handler to run the slide code?
Referring to this answer to a previous similar question, it turns out that it is 'generally' useless using stopPropagation with delegated even handling. The event propagates already up to body before stopPropagation is activited.
But on the example above stopPropagation actually works to prevent the other click event handler attached to the body.
Related
My Stripe Form isn't showing properly. Here is the screenshot.
I included the stripe script tag in my head tag. Added the form and the css and javascript per instructions in stripe docs.
I thought maybe some other links or scripts are overwriting the stripe script so I tried to uncomment them, but nothing changed the stripe form.
I also made sure than my classes aren't overwriting each other.
<head>
...
<!-- Stripe -->
<script src="https://js.stripe.com/v3/"></script>
...
</head>
<body>
...
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
...
</body>
Figured it out. I just ended up making my own styles tho it took some time.
I am testing lungo framework, and by reading their examples (http://lungo.tapquo.com/howto/prototype), it does not work.
I am using their skeleton code:
<body class="app">
<section id="main" data-transition="">
<article id="main-article" class="active">
test.
</article>
</section>
<script src="components/quojs/quo.js"></script>
<script src="components/lungo/lungo.js"></script>
<script type='text/javascript'>
Lungo.init({
name: 'example'
});
</script>
</body>
I have no errors in my console. What can be causing the issue?
Thanks in advance.
If that's all of your HTML, then you're missing a whole bunch of CSS files, etc. Could you share a JS fiddle or longer code example? The way you're not getting any JS errors implies to me you may well be missing some CSS. Also, what version of Lungo are you using? How did you obtain it?
Lots of questions :) However, I created a basic Lungo JSfiddle a while ago - http://jsfiddle.net/otupman/vz59n/ - try that and see if it works. In the "External Resources" section you'll find the CSS & JS I'm including to make it work.
The simple code I'm using (as S/O won't let me post a JSFiddle link without code) simply looks like this:
<section id="main" >
<header data-title="JsFiddle Lungo">
<nav class="left">
<a data-icon="home"></a>
</nav>
</header>
<article class="active" id="first_article">
<strong>Simple Example</strong>
Second article
<br/>
Second section
</article>
<article id="second_article">
<strong>Second article</strong>
First article
<br/>
Second section
</article>
</section>
All of the CSS/JS files are coming from Lungo's example, for example, one CSS is http://lungo.tapquo.com/example/components/lungo/lungo.css
I am getting a strange script error on post back if I have a JuiceUI Dialog control on the page, regardless if it is used or not. I can't find anything out there on this, so I am sure that I am doing something wrong. Can any one provide any help? Below is my .aspx page, there is no code behind.
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<form id="form1" runat="server">
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="_DefaultDiv" class="basic-dialog" title="Basic dialog" runat="server">
<p>
This is the default dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
<juice:Dialog ID="Dialog1" TargetControlID="_DefaultDiv" AutoOpen="false" runat="server" />
<p>
<input id="Button1" type="button" value="button" onclick="OpenDialog();" />
</p>
<script type="text/javascript">
function OpenDialog() {
$(".basic-dialog").dialog("open")
}
</script>
</form>
This might cause because an attempt has been made to invoke JSON.stringify with a value that is not valid. The value argument, an array or object, contains a circular reference.
I'd recommend checking out a new fork named Brew that resolves a lot of issues like this. If there's still an issue, I'd be happy to work with you to fix it.
I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());
Using the following code snippet, the splitter is displayed fine on the first tab that appears after transition to the current page, however the splitter doesn't show up properly in the subsequent tabs.
<div dojoType="dijit.layout.TabContainer" class="fitToHeight fitToWidth" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_1">
<a4j:include
viewId="/view/syllabus/syllabusManagement.xhtml"
id="container_syllabus">
</a4j:include>
</div>
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_2">
<a4j:include
viewId="/view/student/studentManagement.xhtml"
id="container_student">
</a4j:include>
</div>
Here's is the snippet of employeeManagement.xhtml/syllabusManagement.xhtml
<div dojoType="dijit.layout.BorderContainer" design="sidebar"
liveSplitters="true" class="fitToHeight fitToWidth">
<div class="leftPanel" dojoType="dijit.layout.ContentPane"
minSize="5%" splitter="true" region="leading">
Source Code Goes Here
</div>
<div class="targetPanel" dojoType="dijit.layout.ContentPane"
minSize="400" region="center">
Target Code Goes Here
</div>
</div>
When the page loads, defaults to syllabusManagement.xhtml, the splitter functions as needed, but when i switch the tab to employeeManagement.xhtml, the splitters goes for a toss, gives real unpredictable behaviour.
My observation is that the splitter is rendered well when the tab is loaded on transition.
How do one fix this splitter rendering issue ?
Thanks.
i suggest using dojox.layout.ContentPane and setting the href attribute instead of loading all tabs at first.
your layout is needs to be 100% 100% for the tabcontainer and bordercontainer to calculate sizing properly.
See what happens here, if a width/height is not set here