I am trying to use this text expander/collapse jQuery plugin to only display first snippets of text, but if I load this in the page the whole text would show up first and then when the plugin is fully loaded in to the browser it would collapse down(I could visually see this process). Is there any technique that you can teach me so that only collapsed text would display first?
Here is the plugin I am trying to use:
http://plugins.learningjquery.com/expander/demo/index.html
You could put some css into the paragraph type you're collapsing, and hide it when it hasn't been collapsed
<p id="textblock" style="display:none">
then use jQuery to show it right after your plugin collapses it
$("textblock").show()
Related
I have cms block in magento where one div element have style property with backgroud-image and value is magento style URL
<div class="contain-wide" style="background-image: url('{{media url="wysiwyg/spare-parts.jpg"}}')">
problem is when I turn on wysiwyg editor this line gets edited to
<div class="contain-wide" wysiwyg="" spare-parts="" jpg="">
and no longer is valid inline css.
things I tried are adding these settings to /js/mage/adminhtml/wysiwyg/tiny_mce/setup.js
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
valid_elements: '*[*]',
unfortunately that only disables html verification, css is still edited auto by tinyMCE.
You should be able, via the wysiwyg, to select part of the page then click on insert/edit attributes (on the last line of tinymce tools, there is a hand on top of a little box) in which you should be able to edit attributes and maybe make what you need.
This will in fact crate a div for you and in this pop-up box you can select which style you want on this div.
Edit : but as #GCyrillus commented on your question I would recommend you to do it via style, because that would means an admin only wanting to edit the content could break the site visual layout.
instead of using the MCE use a direct path. ie. src="http(s)://yourimage.jpg">
I have an issue with tiny mice,
Actually I am loading a html page where tiny mice is applied on a text area.
and I want to applied javascript function to remove a class from text area content .
How can i do that.
Provide any suggestion please!
tinyMCE.get('text_area_id').setContent('') So what I'm suggesting is that you get the tinyMCE editor and then set the content to nothing in between the (''). This should clear out the content, I tried it on my window
I'm using a bit of script based on Changing div content based on scroll position
I just want to make part of the text (which changes) include some varying hyperlinks.
For example as you scroll it shows a link to Google at one point, and then when you scroll past another div it shows a link to Twitter .etc.
I thought it would be simple as embedding it within the classed text, just like below..
<p class="description" style="display: none;">This is Twitter</p>
However as you can see in this jsfiddle: http://jsfiddle.net/6RHys/56/, the text will change, but the hyperlink does not work.
Would anybody have an idea as to how this is possible ?
instead of text()
$('#date').html($(this).find('.description').text());
use html()
$('#date').html($(this).find('.description').html());
I think this is because you use the .text() function which just gives you the innerText with HTML stripped out. It should work if you use .html() instead.
I've written a plugin which inserts photos/video from a popup lightbox into TinyMCE. This worked fine and formatted very well when aligned/wrapped. When it is inserted in HTML like below:
<img src="blah.png" />
But since then I added a feature to allow captioning, which uses a wrapper div such as:
<div class="ImageWrapper" width="x" height="x">
<img src="blah.png" />
Caption here
</div>
There are now a couple of problems I can't fix.
First: How do I allow TinyMCE to format/align the div as it did with img?
Secondly: How do I prevent the user from selecting any of the contents of the div? Instead clicking should highlight the whole div so formatting and deleting works much more smoothly.
The problem is using a <div> as a wrapper, which is apparently not naturally supported by TinyMCE. You have to go further than fidgeting with some css. TinyMCE being a popular editor, people have already tried and come up with a proper solution. Here's someone who's written a plugin: http://www.tinymce.com/forum/viewtopic.php?id=20319
And there's lots of more info to be found if you google for 'tinymce div plugin': http://www.google.com/#q=tinymce+div+plugin
I don't know what would work best in your situation, so I guess you have to try some of the solutions (plpugins) offered.
Jquery ui doesn't show examples of a tabbed content widget like the list on the right http://jqueryui.com/demos/tabs/#default where you choose examples (default functionality, content via ajax, etc)
Does anyone know how to create a similar tabbed content using jquery UI? No addition scripts.
From this question there is a link to vertical jQuery UI tabs demo.
Also Wijmo Open has added an alignment property to their jQuery UI based tabs if the no additional script constraint can be stretched.
I do believe you can use the jquery ui tabs script you linked to. Use CSS to get the tabs on the right hand side and vertical, instead of along the top and horizontal.
jQuery wise I see no difference. Its a styling thing.
It is not a widget itself but a combination of event handlers and CSS. You can check the source code of it:
http://jqueryui.com/js/demos.js
I'd like to say also that the AJAX content loading is not a great solution as it is used in jQuery UI demos, because they load content via AJAX and they update hash part or URL, but you can't go back in browser history and you can't enter directly to a demo by using a special hash.