I have a slider and I've organized it into a <ul> with the <li>s as the individual items to cycle through. Only the second <li> is visible, and if you scroll left, it takes the last <li> and removes it, puts it on the front, and vice versa if you scroll right.
Here's the Code Pen: http://codepen.io/anon/pen/kGBcr
The slider is on the right side, under "More Influencers." The problem is when I click on the 'follow' link, it changes the CSS and text like I want only until it gets to a <li> that has been removed and placed on the other end. It doesn't prevent the default link, and just reloads the page.
Thanks for any help!
The functions that rotate the slider are on lines 120 and 135. The function that changes the text and CSS background color is on line 78.
Whenever you remove an element with remove(), it loses its bindings, and you need to re-bind event listeners.
However, if you use appendTo() instead to move it, the event listeners will stick around.
Another alternative is using the detach() function:
var objectWithEvents = $('#old').detach();
$('#new').append(objectWithEvents);
Your situation is even worse than just removing, since you're using:
html = $('element').html();
newHtml = someEl.append('<li>'+html+'</li>');
Around line 127. This makes it even worse because not only you're deleting the element, but taking its html content making it even more difficult to keep event listeners associated with it.
Related
HTML has scrollable elements. At any given time one of them is going to receive keyboard scrolling controls like up/down arrow, pageup/pagedown etc.
How can I find out which element is currently active in this way, and how can I make an element active in this way?
Here's jsfiddle to demonstrate the issue.
I can click on e1, e2, e3, or e4. If I do, then arrow keys will scroll that element.
The obvious way to do this would be to call element.focus(). But that does nothing when called on a scrollable div, and document.activeElement keeps pointing to body not to any of them (the one that's actually active, or the one I tried to make active).
So:
is there some other DOM thing which controls it?
or is this functionality not exposed by browsers in any way?
or do I need to set a bunch of tabindex settings to access this state through JS, even though browsers can handle active scrolling status without any tabindex by theselves?
Use Event Listeners To Do So
function gg1(){
document.getElementById("focused").innerText = "e1"
}
function gg2(){
document.getElementById("focused").innerText = "e2"
}
document.getElementById("e1").addEventListener("scroll", gg1);
document.getElementById("e2").addEventListener("scroll",gg2);
This Code Is Just The Basic Version Of How You could achieve it. You can always minify it.
I'm having an issue with special characters triggering events in jQuery. I've got a div containing some text, when it's hovered I call a hover function, when it's "unhovered" I call another function. This works fine if I don't have any quotations: ' or " in the div contents, but causes the unhover event to trigger prematurely if those characters are in the div.
That is to say, the unhover event is being called when I'm still mousing over the div. I've tried using htmlentities, htmlspecialchars on the text in the div, but neither seem to help. Any ideas?
$('#elementID').hover(hoverIn, hoverOut);
EDIT: I should add that the div's contents are being passed to it by php via a TWIG template variable.
It sounds weird. Content should not affect the hover event. It sounds like the div you are asigning the hover function doesn't cover the whole area and possibly another element inside is breaking your code, but without ckecking the actual code is hard to tell what's wrong.
I'm creating a web-app interface which will allow users to construct sentences by clicking on words/phrases. Each word of phrase will be contained in its own page element, eg. a <div>. So the div class would need to allow:
dragging into a different order relative to the other divs/words (ie. sorting)
an X (only visible when hovering over) in the top right corner of its box to remove it completely upon clicking
changing of font/text upon click actions
be inserted into the page when the user wishes to add another word
For instance, imagine this is the page (quote marks denote an element):
"Hi, my name is" [Textbox] "I work at..." "and I was born in" [Combobox]
The phrase in italics is 'inactive' and not part of the sentence, but if the user clicked it then it would change to "I work at" [Textbox] and a new div would be added eg. "And also at..." to allow further expansion. The phrases in bold would have a close button /clickable action to get rid of them or make them inactive again. Also they would be draggable to change the order. As you can see I would also need to dynamically insert new textboxes and comboboxes to accommodate more phrases requiring input.
Could somebody give me a brief run down on what steps I need to take? I've seen sortable list elements in JQuery eg. http://jsfiddle.net/ctrlfrk/A4K4t/ which is a start. Would I just need to spruce this up with some basic JavaScript and CSS? Or would I need to use server-side scripting to dynamically add more page content?
To summarize, I need the div to change font/text upon clicking, have a hover-over close button, remove and be inserted upon simple click events, and be sortable by dragging. I also need comboboxes/textboxes to be added/removed in parallel.
Any tips would be greatly appreciated.
You don't need the server for new content unless it is stored or generated there.
Not having done this exact thing before I don't see any grand scheme to implement, I would just add the features incrementally until you get where you need to go. You may have to refactor things a bit along the way, but I probably don't have to tell you that. ;)
One thing you will have to do when you add or delete elements is to rebind the jQuery functions, it won't enough to just call them when the document loads. So put them in a function and call it whenever you add or remove an element.
Regarding your description of the UI behavior, you say that inactive elements can be dragged and that they can be made active by clicking on them. You can do this (just see if the thing has been dragged or not on mouseup to know whether it was drag or a click) but it might not be the best UI design choice, IMO. It wouldn't be the worst thing in the world, but I find it a little frustrating when the wrong thing happens when I try to do something. Of course, implementing and seeing for yourself is probably best.
Sorting:
I would implement the phrases in an unordered list (ul) which makes it as simple as
$("#ulId").sortable();
You can make ul/li items stack next to each other in a similar manner to how you make horizontal navigation menus out of ul elements.
A destrunction button:
Just use a template li similar to this
<li id="text1Wrapper">
<span id="text1"
onmouseover="javascript:$('text1Remove').fadeIn();"
onmouseout="javascript:$('text1Remove').fadeOut();"
onclick="javascript:$('text1Content').
replaceWith(
$(document.createElement('input'))
.attr('type','text')
.val($('text1Content').text())
);">
<span id="text1Content">Text Here</span>
<img id="text1Remove"
style="display: none;"
src="./x.jpg" alt="Remove"
onclick="javascript:$(this).parent().remove();"
/>
</span>
</li>
A quick description:
The span mouse over event tells jquery to fade in the remove button (so when you hover, the remove button becomes available).
The span mouse out event tells jquery to fade out the remove button when it's no longer needed (so when you move the mouse off the li, the remove button is no longer visible)
The onclick of the span replaces the span with a text box containing the content of the span. I will leave the "save changes" as an excercise for the reader, since it's essentially the same but in reverse.
Img tag style has display: none to hide it initially. This is essentially the end product of a fadeOut() but without the fade.
The on click event of the remove button gets the parent (the li) and removes it, and all children from the dom.
Note that the events are only put here because it seemed the logical place to explain it. All events in the outer SPAN tag are a useless waste of space, as they will all be overridden when we clone the node in the next section.
Insertion into the page:
All you have to do now is
var cloneLi = $('#text1Wrapper').clone();
cloneLi.attr('id', 'text2Wrapper');
var cloneSpan = cloneLi.children('#text1').attr('id', 'text2');
var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content');
var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove');
You will then need to change the mouseover, mouseout and onclick functions of the outer span using jquery events:
cloneSpan.mouseover(function(e) {
// Insert functionality from template here
});
cloneSpan.mouseout(function(e) {
// Insert functionality from template here
});
cloneSpan.click(function(e) {
// Insert functionality from template here
});
I'm using EasySlider, but unlike any of the examples of this plugin that I've found, I show multiple elements at any one time and the width is 100%. The separate images make up a full, long consecutive image, which is Photoshopped so even the borderline between first and last looks natural. It's configured to be a continuous slide automatically.
In the plugin there is this code:
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
My issue is that only the first element is cloned after the last one, so upon the second rotation of this slider, only the first element is shown, until it gets to the far left, then the other images appear to "pop" in. (similar: [EXAMPLE] if you imagine and all images to the right of the fairground not appearing until the fairground gets to the far left).
Is there any better way to manage this cloning of elements so that ALL the images are cloned? or perhaps someone can think of a better way? I'm new to JQuery
NOTE: I'm trying to create an operation whereby as an element leaves the screen on the left, it is placed back onto the right. Is there a way to ultimately achieve this?
I think you may want to consider a different plugin.
If you change the plugin, updating will require reapplying your patches.
I'd recommend
http://www.gmarwaha.com/jquery/jcarousellite/
or
http://sorgalla.com/jcarousel/
These both support what you are talking about.
I agree with troynt, in this case it would be better to use something that meets your requirements.
I just made a simple "plugin" what only does, what you need, maybe it's useful to you.
http://jsfiddle.net/doktormolle/4c5tt/
You can setup delay and duration and choose to pause on hover.
Given you have a list of items in your scroller like this:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
And assuming that every time you advance the scroller, the first-most li moves off screen, you can continuously pluck the first li off the front of the list and append it back to the end on each click of a "next" button or scroll event. If you're using jQuery >= 1.4, you can do this by using the detach() method, which will remove the element from the DOM but keep all its associated data so you can easily reattach it later:
$('ul li:first').detach().appendTo('ul');
Dont know, if I unterstand it the right way, you may try this:
//at first run add a class "init" to the inital li-elements,
//so that later only them will be cloned
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');
//prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));
Say I want to hide a span when the user highlights a bit of text containing that span, with the intention of copying that text on to his clipboard.
For example:
<p>The dragon <span class="tooltip">a large, mythical beast</span> belched
fire at St. George.</p>
I have found that in Firefox Mac, span.tooltip will disappear from view (in accordance with my CSS declarations) but will show up in the clipboard when it's copied there. I figured (wrongly?) that if I said "onHighlight, hide tooltip," maybe this wouldn't happen.
Though it may be more complicated, why not just have an onmousedown event on the <p> element, and thet event will then attach an onmousemove event and onmouseout event, so that if there is a mouse movement, while the button is down, then remove the class on the span elements, and once the user exits, the element then you can put them back.
It may be a bit tricky, and you may want to also look for key presses, or determine other times you want to know when to put back the css classes, but this would be one option, I believe.
It sounds like you need to go one step further and on highlight, remove the <span> and save a reference to it. Once the highlight is finished, re-insert the reference to the object.
// copy start detected
var savedTooltip = $('.tooltip').remove();
// later that day when copy finished
$('p').append(savedTooltip);
If position of the <span> in your markup is important, you'd have to create a temporary reference element so you'd know where to re-insert it in the DOM.