The issue: I have text fields that are extremely long, and I'm truncating them and putting the full text into a jQuery Mobile popup that will appear when the '[more]' link is clicked. However, I'm having trouble finding the right hook to initialize the popup after replacing the text with the popup markup. I bound it to pageinit, but when I click, nothing happens. Not binding the replacement code at all gives me the message: "Function called on popup that has not been initialized", so I know that some initialization is necessary - but if not at pageinit, I don't know how early in the stack it needs to be called.
JSFiddle: http://jsfiddle.net/KSFyn/1/ - note: since the built-in jQuery Mobile for JSFiddle is 1.1.1, the pageinit isn't performing as expected, but that gives you an idea of what I'm trying to accomplish.
Does something like this work?
http://jsfiddle.net/RyNFc/1/
UPDATED: need to recreate the jQM Markup as you are dynamically adding the popup text after the page is created (using the 'create' event in JQM ~ beh)
http://jsfiddle.net/RyNFc/4/
HTML
<div data-role="page" class="type-home">
<div data-role="content">
This is an exceptionally long span ...
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
<p>This is an exceptionally long span that I will attempt to break up with JS and present the full text as a popup. This is an exceptionally long span that I will attempt to break up with JS and present the full text as a popup.</p>
</div>
</div>
</div>
Related
I've tried looking at the documentation for addThis and it seems like it's being updated or something because all the links these help posts link to don't even mention the API bits they describe.
Anyway,
I just need to be able to programmatically click an addThis button. However, I can't seem to do it via console before I implement it in my code.
I read that this has something to do with how the addThis listeners are added only when the document is done loading. This doesn't make sense to me because even if I manually try to trigger a click in console, it still does nothing but return the html of the link I'm trying to trigger. For example:
`$('.at-svc-facebook').click();`
OR `$('.at-svc-facebook').trigger('click');`
OR `$('.at-share-btn.at-svc-facebook').click();`
I mean, by the time I open console the dom is ready. So then what else might be preventing me from clicking these buttons via jQuery?
I've tried adding a listener to an element myself, and then clicking it programmatically, and it works. So something is different about the way addThis listens for a click. I may update this question with something I find after inspecting their js.
===================
This is what is in the DOM which addThis populates and listens to:
<div class="addthis_sharing_toolbox"></div>
This is what ^ that code is turned in to from addThis:
<div class="addthis_sharing_toolbox" data-url="http://localhost:8001/halloween/" data-title="33 Halloween Costume Ideas">
<div id="atstbx" class="at-share-tbx-element addthis_32x32_style addthis-smartlayers addthis-animated at4-show">
<a class="at-share-btn at-svc-facebook">
<span class="at4-icon aticon-facebook" title="Facebook"></span>
</a>
<a class="at-share-btn at-svc-twitter">
<span class="at4-icon aticon-twitter" title="Twitter"></span>
</a>
<a class="at-share-btn at-svc-google_plusone_share">
<span class="at4-icon aticon-google_plusone_share" title="Google+"></span>
</a>
</div>
</div>
Now, you can see the jQuery I'm using to click the buttons and the code it's trying to click.
The issue is that addThis was putting a second link with the exact same class in the DOM for some reason. It generates some HTML and appends it to body.
So what I needed to do to select the button and trigger a click was to specify the 2nd element in the array of elements and call click on that one. Like so:
$('.at-svc-facebook')[1].click();
Now, the next problem I face is chrome block a programatic popup, but that's beyond the scope of this question. :(
change the
var class_name = $(this)[0].className;
as below,
var class_name = $(this)[0].attr('class');
and it'll work. :)
<script>
$(document).ready(function() {
$('.notification .tools .remove').on('click', function () {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});
</script>
<div id="notification-list" class="notification-chain" style="display:none">
#foreach ($notifications as $notification)
<div class="notification" style="width:300px">
<div class="tools">
</div>
<div class="notification-messages">
<div class="message-wrapper">
<div class="heading">{{ $notification->name }}</div>
<div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div>
<div class="date pull-left">{{ $notification->created_at }}</div>
</div>
<div class="clearfix"></div>
</div>
</div>
#endforeach
</div>
Hello readers,
Above is currently what I'm working with. It displays a drop-down to hold all notifications a user has received and I currently have an x in the top corner of each "notification" div.
However none of the above jQuery seems to be running. The alert won't display and I get nothing in the console.
Please feel free to ridicule me and tell me what stupid thing I'm doing wrong.
Many thanks.
I appreciate all the help guys.
Here are some laravel.io files with some wider context:
The full html:
http://laravel.io/bin/Nk4xP
js for the dropdown:
http://laravel.io/bin/9vn1O#
Here are some debugging tips:
Think about all the things that might be going wrong, then start ruling them out. For example:
Maybe jQuery is not loaded at all.
Maybe the selector for the event handler is incorrect and jQuery can't find an element to attach the event handler to.
Maybe the code in your $(document).ready() function is not executing, and the event handler is never set up.
Using a combination of changes to your code and the browser console, you can rule these three things out:
Is jQuery loaded? Open the console & type $ - if it says undefined, then that's your problem.
Is the selector for the element incorrect? Open the console and type $('.notification .tools .remove'). If you get an empty array, then that's your problem. As an added bonus, Chrome (and probably other browsers) will highlight the selected element if you mouse over it - this is useful in case you're selecting a different element than you expected.
Is the $(document).ready() code executing? Stick a different alert in there at the top of the function & see if it fires when you reload the page.
It's important to tackle issues like these one at a time - what happens if you change two or more things at once, and the problem goes away (or a new problem arises)? You won't know which one solved or caused the problem!
I was able to make it work in the fiddle below.
I removed the display:none (so I can see the div) and the non html characters. Try looking at the browser console (F12 in linux and windows computers) and see if there are errors. Javascript errors will prevent further code to run.
Also I put a text within the a href tag
remove
https://jsfiddle.net/m9rktusb/
As notification is a class for the div, there should be a dot in front of the class as a selector like this:
$(this).parentsUntil('.notification').remove();
Hope this works.
Luke can you please show us the final HTML?
the code is running perfectly, so the issue should be somewhere else.
https://jsfiddle.net/z7958hx7/1/
$(document).ready(function() {
$('.notification .tools .remove').on('click', function() {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});
I'm developing a RTE(rich text editor) using a wrapper div.
<div id="myeditor"></div>
//then
editorfunction(myeditor);
What the function does is add the following elements
<div id="myeditor">
<div class="toolbar">buttons here</div>
<div class="editorwrapper">
<div class="editor-richtext">
rich text etc
</div>
<textarea class="editor-source"><p>rich text etc</p></textarea>
</div>
</div>
I can successfully grab the html from the .editor-richtext and put it inside the textarea, but when I edit the textarea, I don't seem to be able to paste that back into the rich-text.
Thanks in advance!
Update 1
Ok, it seems that
$("richtext").blur(function() {
$("textarea").val($(this).html());
});
Works fine, but not the other way around (from textarea to richtext).
Update 2
It seems it is very unstable, it partially works but is acting strange :\
I'm not able to fully get content from textarea and paste as html into contenteditable. I will continue to do some research.
Update 3
I just updated update 1 and update 2 as I totally flipped textarea and richtext in my brain. Sorry!
Update 4
Ok, I pretty much got it solved now. I just have one slight problem, upon initialization, if I don't focus the contenteditable div and switch to the source view\textarea. the textarea is emptied, and when I then go back to RTE view\contenteditable div it is emptied. from the empty textarea\source.
I'm working on a work-around.
You can hook the onBlur event of textarea to copy the text and paste it in editor-richtext
$("textarea.editor-source").blur(function(){
$("div.editor-richtext").html($(this).val());
});
EDIT
For other way around, you can use the following code segment
$("textarea.editor-source").focus(function(){
$(this).val($("div.editor-richtext").text());
});
You may want to use jQuery and the following functionnalities?
$(".editor-source").keyup(function() {
$(".editor-richtext").html($(this).val());
});
Everything works fine. Selectors in your example are incorrect thought:
HTML:
<div class="editor-richtext">
original text
</div>
<textarea class="editor-source">modified text</textarea>
JS:
$(".editor-source").blur(function() {
$(".editor-richtext").html($(this).val());
});
Demo
UPD:
$(".editor-richtext").click(function(){
$(".editor-source").val($(this).html().trim());
});
new demo that puts content from div into textarea on click event.
I am using, thickbox in Joomla, have included jquery and thickbox files, and when I use iframe or ajax then every thing shows fine while if I try to show inline content in thickbox, it doesnot show any thing. Following is my code:
Show hidden modal content.
<div style="display:none" id="hiddenModalContent">This is the div that I want to show</div>
So where the problem is? I am using it in Joomla. It shows popup but nothing inside it, and it is really strange that this is not working in my code while working on thick box demo with same code, so please tell whatever you know.
thanks
This will work for you;
you have to warp content into another HTML element within the hiddin div:
Show hidden modal content.
<div style="display:none" id="hiddenModalContent">
<div>This is the div that I want to show</div>
</div>
did you try wrapping your content ("This is the div that I want to show") inside a blank div?
eg:
<div style="display:none" id="hiddenModalContent"><div>This is the div that I want to show</div></div>
What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?
It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.
You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});