I've been using a shareware JS accordion-style sidebar (www.dynamicdrive.com/dynamicindex1/slashdot.htm). It's been working beautifully with PHP-based HTML, but is not working with AJAX.
The sidebar builds itself on <div>,<span>and<a> elements. Here is a section of the JS code:
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
If I use hardcoded HTML like the following (or construct the same with PHP), it works fine:
<div id="navbar_side" class="sdmenu">
<div><span>STUDENTS</span><a>Adding Students</a><a>Deleting Students</a></div>
</div>
However, if I start with:
<div id="navbar_side" class="sdmenu"></div>
and then use this:
document.getElementById("navbar_side").innerHTML="<div><span>STUDENTS</span><a>Adding Students</a><a>Deleting Students</a></div>";
the menu doesn't slide. The info is all there. The <a hrefs> all work (which I've left out here). But the accordion movement doesn't - well... - move!
Why is this? Clearly the menu is not reading the AJAX-constructed node tree the same way as the PHP-constructed one.
Thanks,
Nick
Recommend you to start over your work by using jQuery UI - Accordion. Much cleaner & effective.
Related
I'm having a little difficulty finding a way to insert data programmatically into my ckeditor instance.
An example of what i'm trying to accomplish:
<html>
<body>
<div id="top-area"></div>
<div id="mid-area"></div>
<div id="bottom-area"></div>
</body>
</html>
On a button click I am trying to add data inside of the div with id mid-area. I would even be okay with replacing that div with the data I have.
When I use
.insertHtml(
'<div>This is a test insert for a random area</div>',
);
It just populates that div at the very top.
I have tried targeting the div with
document.getElementById('mid-area')
but even that doesnt return any value.
Any help is appreciated. Thanks!
Since I am using the ckeditor4-angular package I am able to find the element and set the html by doing
#ViewChild('editor', { static: false }) component;
const element = this.component.instance.document.getById('mid-area');
element.setHtml('<div>This is a test insert for a random area</div>');
I will not mark this as the answer incase somebody else comes up with another solution that works better. Thanks!
Trying to use kendo-mobile-switch inside kendowWindow. The switch is displayed fine, but doesn't toggle. On the same page with the same included kendo css/js the same mobile switch toggles just fine if used on the page itself, not inside the kendoWindow.
I've looked in the page source and it looks like when switch does toggle, the following transformation is added:
<span class="km-switch-handle" style="transform: translateX(27px) translateY(0px);">
The same switch in the "non-toggled" state looks like this:
<span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">
However, if I look at the source of the toggle inside kendoWindow, in both toggled and non-toggled states it looks like this:
<span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">
I've also dogged through kendo.all.js and it looks like when switch is toggled, it computes the offset it needs to transform itself based on the position. My guess is when displayed in the kendoWindow, get position logic fails/doesn't work properly:
_position: function (position) {
var that = this;
that.position = position;
that.handle.css(TRANSFORMSTYLE, 'translatex(' + position + 'px)');
if (that._animateBackground) {
that.background.css(MARGINLEFT, that.origin + position);
}
},
Any idea what the problem might be?
Guess I'm going to answer my own question:
Found a very similar issue when mobile switch is used inside the list view:
http://www.telerik.com/forums/angular-kendo-mobile-switch-in-list-view-template
The switch in this example behaves exactly the same as it does in kendoWindow. Judging by the title of the issue, the problem was with "angular compilation is performed before the items are inserted into the DOM". This would explain why position is not calculated in the case with kendoWindow.
When I use an empty span, let's say
<span class="anchor" id="jumptome"></span>
ckeditor removes it.
To the config.js of ckeditor I added
CKEDITOR.editorConfig = function( config ) {
config.IgnoreEmptyParagraphValue = true;
};
CKEDITOR.dtd.$removeEmpty.span = 0;
Now ckeditor does not remove the spans, but they are wrapped in p's like
<p><span class="anchor" id="jumptome"></span></p>
Is there any configuration to remove the p's (I need the paragraphs for other elements, just want to avoid them for the spans).
Thanks in advance!
Why would you need the spans? If you need an anchor, why not use for example a DIV which can be styled to be a visible block in the Editor but an invisible ... anchor in the output content? I do this in my CKE app. Although I use widgets for anchors but same princible anyway.
I'm guessing the reason is because of caret positioning and user targeting - how would the user target that anchor? If it can't be targeted - why do you need it in the contents? Why not something targetable?
Environment:
Ruby 1.8.7
Selenium WebDriver 2
Ubuntu 12.04 Desktop
Firefox 13.0.1
Problem:
I have div tags being used as selects. You click on the div and a dropdown style window shows up with more div tags as the select options. Now I can go in and create a way of clicking on each of these options for each 'div as select' but what I'd really like is to write a piece of code that clicks on the divs I know about and then determines which divs are now displayed and enabled after the click. Then I can click on 1 of the options at random.
So my current code is something like this:
allDivs = brwsr.find_elements(:tag_name, 'div')
origDivs = allDivs
allDivs.each do |e|
if ... # Get the div I want
e.click
newDivs = brwsr.find_elements(:tag_name, 'div')
origDivs.each do |orig|
newDivs.delete(orig)
end
# Do something with remaining new divs here
end
end
The main problem I have is that this is extremely slow. I currently have around 200 divs to spin thru and this method takes a few minutes to complete. Normally, I wouldn't expect spinning thru a couple of hundred array elements to take very long. But it does.
To shorten the time I've attempted filtering the allDivs and newDivs by spinning thru them once and deleting anything that is not displayed and enabled.
So I'm currently stuck with a really slow solution. I don't mind this 'finding of new divs' being a little slower as it should also lead to much shorter script dev times. However, taking minutes to complete is way too long.
First question: Can Selenium return only elements which as displayed and enabled with some extra API string around the find_elements call?
Second question: Does someone have a better way of finding the new div elements without having to go thru the array of elements.
It would be very helpful if you could post some sample HTML of the DOM you are trying to automate.
With that said, the ruby webdriver bindings do support finding elements by chaining. Thus, given some html like this:
<div class="outer">
<div class="one">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
<div class="two">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
<div class="three">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
</div>
You could write something like this to find the "B" div in the second group of divs ("two"):
group = brwsr.find_element(:class => "two")
desired_item = group.find_element(:class => "beta")
Or, even more simply through ruby's chaining capabilities:
desired_item = brwsr.find_element(:class => "two").find_element(:class => "beta")
One other way, which I prefer the most is to select an element via a CSS selector, which selects the element faster with an easy to read syntax:
desired_item = brwsr.find_element(:css => "div.two div.beta")
I have a page with a lot of images, each of them being wrapped with an onclick event. For example:
<a onclick=javascript:xxx(y,z)><img id="myclass" src="yyy"></a>
Following command returns all the images correctly:
$x("//img")
This doesn't (returns null):
$("img")
I assume, because these img tags were created dynamically, so are not directly in the source.
My idea was to add .click() at the end, but somehow it doesn't work.
So the question is:
How do I simulate clicking all images at once to trigger all associated javascript functions?
You can't .click() on collection as it is just a container for some objects and it doesn't have any methods from objects inside. You need to iterate over each object and call .click() individually:
for (var idx = document.images.length - 1; idx >= 0; idx--){ document.images[idx].click() }
I've just ran it in console and opened your profile and ad on sidebar.