I am trying to use Sidr (berriart.com/sidr) slide panel and everything works but on smartphone the opening and closing animation is not smooth, moving with jerks. Is there a solution to make the animation smooth?
<div class="app">
<span id="menu-badge" class="dx-badge" style="display:none;"></span>
<div id="sidr">
<dx-list
#notificationsList
[dataSource]="menu.items"
[pullRefreshEnabled]="false"
(onItemClick)="menu.itemClick($event)">
<div *dxTemplate="let item of 'item'" class="slideout-menu">
<fa *ngIf="item.icon.indexOf('fa')==0" name="{{item.icon}}"></fa>
<i *ngIf="item.icon.indexOf('glyphicon')==0" class="{{item.icon}}"></i> {{item.text}}
</div>
</dx-list>
</div>
<dx-toolbar
*ngIf="authorized && loaded"
#appToolbar id="appToolbar"
[dataSource]="menu.toolbarItems"
(onInitialized)="onToolbarInitialized($event)">
<div *dxTemplate="let data of 'title'">
<div class="app-header">{{menu.appHeaderText}}</div>
</div>
</dx-toolbar>
<router-outlet *ngIf="authorized && loaded"></router-outlet>
</div>
and in .ts file:
$(document).ready(function() {
$('#simple-menu').sidr();
});
One possible issue could be that there are too many change detection cycles going on. A pc can handle this, a phone not so much. Try rewriting your app so it can work with the ChangeDetectionStrategy.OnPush.
Either way, it's worth running a profiler using the chrome devtools, while opening and closing. With a little digging, you can find out what part of code is using up the resources. It could as well be an *ngFor that needs a trackBy because it keeps creating elements.
This question cannot really be answered by just the code you gave, and needs proper investigation on your hand. On the other hand, to use jQuery in combination with Angular is frowned upon, but let's not open that can of worms :)
I'm having a pretty weird problem while trying to design this page inside of adobe muse. I'm not an adept at coding javascript, so don't get mad if something is wrong, but here is what i'm trying to accomplish.
I decided to design this website with adobe muse, because the company I work for decided that the in-browser editor that came along with muse was the perfect solution for what we were doing. I shortly after figured out that designing things around using muse can sometimes be quite frustrating, and this is one case that I just cant wrap my head around.
I'm running several kinds of searches on the site, and for now, since I didn't have much time I thought the easiest way to incorporate all 3 different searches into 1 page was to design a custom search embed, that had tabs to toggle though all 3 kinds of searches, then I would write some super simple javascript that takes the text inside of an input, and plugs it into a url that redirects the page to wherever the search results were for the said word.
<script>
function storeSearch(x) {
location.href = "http://gistsilverbuckle.com/store.html#!/~/search/keywords=" + (x) + "&offset=0&sort=relevance";
}
document.getElementById("ecwidSearch").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("ecwidSearchButton").click();
}
});
</script>
<div class="ecwidStoreSearch">
<div class="searchContainer">
<div class="searchFormContainer">
<form>
<input type="text" class="searchField" id="ecwidSearch" placeholder="Search the Store">
</form>
</div>
<div class="searchButtonContainer">
<div class="customSearchButton" id="ecwidSearchButton" onclick="storeSearch(document.getElementById('ecwidSearch').value)">
<svg class="searchButtonIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.55 12.82">
<title>Looking Glass</title>
<path d="M306.8,264.12a3.54,3.54,0,0,0,.1-5h0a3.53,3.53,0,0,0-5-.1h0a3.54,3.54,0,0,0-1.08,2.48,3.49,3.49,0,0,0,1,2.5h0a3.48,3.48,0,0,0,2.47,1.08,3.56,3.56,0,0,0,2.52-1Zm2.17-2.46a4.59,4.59,0,0,1-1.05,2.84l4.35,4.51-.78.76-4.35-4.51a4.63,4.63,0,0,1-2.88.93,4.59,4.59,0,0,1-3.23-1.4h0a4.64,4.64,0,0,1,.11-6.53h0a4.62,4.62,0,0,1,6.53.12h0A4.64,4.64,0,0,1,309,261.66Z"
transform="translate(-299.73 -256.95)" />
</svg>
</div>
</div>
</div>
</div>
Fairly simple, right? That's what I thought too, it worked for me when I tested it inside of dreamweaver, but as soon as I embedded the code inside of muse, the base function works if you click the search button, but it doesn't work if you hit enter?
I'm probably doing something extremely dumb, so maybe you could point it out to me.
Here is my jsfiddle: https://jsfiddle.net/fosterboytron/3aba7gsa/
here is the link to the page i'm creating. http://gistsilverbuckle.com/search.html
Hope I included enough information, if you need any more, just respond and i'll add whatever you need.
Thank you for whatever help you can offer!
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
I have the following HTML:
<div>
<img src="source.com/image.jpg" title="My Image">
</div>
I would like to get the title of all images ("My image") in this case, and add this title on to the parent , so that the above example would look like this:
<div title="My Image">
<img src="source.com/image.jpg" title="My Image">
</div>
Would appreciate it very much if someone could give me a push in the right direction!
Thanks!
This is pretty much the same question as the previous one you posted. In this case you do need to save the image node to a variable so that you can read its title and set it to the parent.
YUI().use('node', function (Y) {
var image = Y.one('img');
image.get('parentNode').set('title', image.get('title'));
});
If you're having trouble making changes to DOM elements I'd suggest you take a little time to read a couple of articles/books that introduce you to the subject. Here are some good options:
Eloquent JavaScript. A great book for starting with JavaScript and that has a chapter about the DOM.
The Mozilla Developer Network has a great collection of articles.
The YUI3 Cookbook will give you everything you need to get started with YUI.
I am working on building an application which has a few HTML components.
Use Case:
I am trying to achieve something similar what is present here. I want to call the HTML components on click of a menu and apply some actions like drag and resize, etc.
Research:
I was advised to take an object-oriented approach for building the application and hence while going through Google came across class.js for JavaScript inheritance.
I went through the initial tutorials, but I am not sure how and where can I store the HTML initially that will hold the structure for the HTML components?
In the reference application they have used backbone.js and require.js, but I am a bit short on time to learn these.
My Work So Far:
What I have tried is creating a file components.js and creating the outer HTML structure for a component like this:
var textBox = '<div class="structure-textBox">
<div class="editable">
<p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
<ol>
<li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
<li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
</ol>
<p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
<p><span style="font-size:14px;">Click on the <strong><u>Design Assistance</u></strong> link for further help.</span></p>
</div>
</div>';
This is a text box stored in a JavaScript variable that I want to add when user clicks on a menu. But how can it be achieved using class.js's inheritance pattern?
I have a canvas page created and menus for the components. Now I am stuck at this part of getting the html content and displaying it on the canvas.
I don't see that what you're asking has anything to do with inheritance.
There are several simple ways to put something on your web page using JavaScript.
For instance, if you have the following on your page somewhere <div id='target'></div>, you could write this:
var textBox = '<div class="structure-textBox">
<div class="editable">
<p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
<ol>
<li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
<li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
</ol>
<p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
<p><span style="font-size:14px;">Click on the <strong><u>Design Assistance</u></strong> link for further help.</span></p>
</div>
</div>';
document.getElementById('target').innerHTML = textBox;
For best results, I would suggest learning to use a library like jQuery. These tools are designed to make it easier to manipulate the HTML of the page, among other things.