Here's the fiddle: http://jsfiddle.net/scZtb/1/
Be warned, as the title suggests, this might crash your browser (or at least the tab, if you're in Chrome).
I'm trying to get this example to work. I've copied it almost exactly, so I don't know why it would work there, but not in my example.
Anyone know what I'm doing wrong?
It seems to only work with <ol>s not <ul>s. I can't imagine why that is, but I can work with that.
Not sure why you are wanting/needing .nestedSortable, which I don't see documented on the jQueryUI site. When I change it to use .sortable, it appears to work correctly. (Using latest Firefox)
Okay, you are using the selector 'ul' in this case, your example doesn't have a nested UL element, but when you do, you are effectively calling the plugin on the original outer list, and again on the inner list...
See recursion... When you use a generic selector with jQuery/jQueryUI you select ALL matching elements, and are calling the plugin on the outer item, then the inner item...
Related
I'm using the tab project explained here: Tabs Project
Everything else but my issue works perfectly.
The only thing that doesn't work for me, at the moment, is applying *ngFor when creating tabs.
I know that the 2nd-phase checking by angular detects changes, and he's right, the tabs might be adding while the 2nd-phase check is in progress.
What I want to do is to try and still make it work, it's super important to me to use *ngFor within the tabs selector.
Provided is a Plunker code demonstrating the crash and what I'm trying to achieve.
Plunker Code
Important to say, Ive looked into
Here
and I understand that its only on debug mode and what the answerer said, though it was a year ago.
Almost the same answer, still not helpful
An ugly work around
In Addition
Unlike the Plunker which able run the code with errors in the console (that's the explanation of the issue), I cant even switch tabs in my project, but that's a normal behavior, I don't want bad code.
Unfortunately, I cant share my real code because its for my work basically, but I can provide more data if needed, though it is based almost 100% from the Plunker and the project I provided in the beginning of the issue.
.
One solution is to wrap your "zone" code with setTimeout (other methods for triggering change detection manually will also work)
if(activeTabs.length === 0) {
setTimeout(()=>{
this.selectTab(this.tabs.first);
},0);
}
Full plunker: https://plnkr.co/edit/UVfiJFYexgua2HfPe0Lw?p=preview
In order to fix the issue you need to remove the code for setting the first tab to active from your ngAfterContentInit() method. This code is causing the issue:
if(activeTabs.length === 0) {
this.selectTab(this.tabs.first);
}
I assume that the error pops up because change detection requires that the DOM is stabilized after one run, and your call in the ngAfterContentInit() would require anothed pass of CD to reflect the new tab.active value in the DOM.
What you could do instead is set the first element in your *ngFor to be active by default. Something like:
<tab *ngFor="let item of ['1','2']"; let index = index" [active]="index == 0"...
EDIT: Seems you can also use the first local variable (haven't tried it). See this plunkr
I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.
On my page I'm currently doing something like this: http://jsfiddle.net/FBCSt/6/ I really don't know why, but in Chrome I got some strange issues with that - sometimes the contents of the div elements are not loaded correctly. In IE, Safari and Firefox it work fine, but as I said, in Chrome it is causing some trouble.
That's why I want to know, if there is a more sleek way to do this? (There are three buttons, every one is assigned to one div. Only one div should be visible)
I am thankful for every answer =)
EDIT: Thanks everybody. This is the solution. It works well =)
"a better way: jsfiddle.net/FBCSt/13 – #Mohammed ElSayed 20 mins ago"
Try this: http://jsfiddle.net/FBCSt/10/
In IE, Safari and Firefox it work fine, but as I said, in Chrome it is
causing some trouble.
I really don't see an issues when testing under Google Chrome 19.0.1084. But in any case,
That's why I want to know, if there is a more sleek way to do this?
Yep, there is. Since one of your tags is jQuery, I suggest you take a look at jQuery UI's tabs.
Why don't you use show() instead of toggle()? Maybe the issue is related to using toggle(). And you can combine the elements to be hidden: For example,
$('#page2,#page3').hide();
$('#page1').show();
Or as nicely put by Mohammad,
$('#page1').show().siblings().hide();
I have working solution on this url : pastebin it works in chrome and also in FF.also it will work even if you add 1000 id with page#100 but still it will not have too much code. thanks.
Like Abody97 said: try JQuery UI tabs
If you're looking for a "more sleek" way of doing this, try this fiddle: http://jsfiddle.net/NCbW6/
It doesn't bother with specific ids for each element so you can add as many as you'd like without changing the JS.
hey dudes recently i came across a bizzare problem while trying to learn tabbing .. my code worked like charm in firefox and chrome it didn't work in any version of ie ...There will be two tabs and related contents when i click on tab1 corresponding content should be shown hiding other one ..same goes for tab2 it worked in ff and chrome .. but ie add all contents as i switch to other tabs my code goes like this http://jsfiddle.net/myth/PZZ6a/16/
The calls to "getElementsByName" aren't working for you. I think that's because "name" is not a proper attribute for <a> elements, but I have not found any MSDN documentation supporting that notion. The behavior, however, very strongly suggests that that's the case.
edit — well no, it doesn't seem that "name" is improper for <a> elements after all; however, for whatever reason that's the cause of your problems. The calls to "getElementsByName" are returning empty node lists, so your "for" loops don't do anything.
It definitely has to do with getElementsByName not working with the div element in IE. Easy fix though since you already have classes on those two things, use getElementsByClassName.
var tabs = document.getElementsByClassName("tab");
var seltabs= document.getElementsByClassName("seltab");
Working Fiddle: http://jsfiddle.net/CeVa9/1/
Note: Tested in IE9.
I'm trying to modify this script that emulates the Word 2007 minibar in a textarea. I have wrapped it in a plugin, the problem is that it will not work with multiple textareas.
You can try it out at JSBin
(Just select som text in the first textarea and then click on the "b")
Can someone help me? I'm kinda lost.
Update
Should have mentioned that it shows up correctly in the preview, but it adds double tags in the textarea. And it doesn't work in Firefox or IE. Why?
It is very hackish, so I was hoping for someone do show me how to do it right.
It only works in Chrome as of now
First we'll address the double tags issue, they happen because of these handlers:
$("#bold").click(function() { ... });
$("#italic").click(function() { ... });
$("#underline").click(function() { ... });
$("#link").click(function() { ... });
They're being bound inside your .each() loop, meaning a handler is being bound for each element you're running your code on, creating n handlers for the same #bold element, just move these handlers outside your .each() loop (and be sure to .unbind() them or use .live(), in case the plugin is run more than once as well).
While we're at it, we should move the $(document).mousedown(function() { ... }); out of that loop as well, same issue of not wanting to bind it multiple times.
Your IE/Firefox problems are mostly the result of how the example is setup on JSBin (jQuery not being defined because of the includes), not actual code issues with the plugin. However since .select() can be used across browsers I think you can eliminate the $.browser.msie clause, at least in IE8 it's not needed, but be sure to test older versions if you want to support them.
With only the changes above and some code formatting improvements (.css() can take an object for example), I've setup your code for testing here.