I was wondering if it's possible to add a class to an image that is uploaded through tinyMCE.
I have this string that calls the description from my database.
<div class="articletext"><?$string = $image["description"];
Currently, to make the images responsive I add this inline css.
<style> img{width:100%; height:auto;}</style>
It works fine I just find it a bit sloppy and would like to see if there is a better way.
The output code looks like this when rendered: down by articletext is is where the image is shown.
<div class="grid_4">
<style> img{width:100%; height:auto;}</style>
<div data-id="id-80">
<article class="box white-bg mb-25">
<div class="notices-title">Test Image In Post 1</div>
<div class="newsdate" style="margin: 10px 0 !important;">February 26, 2014</div>
<div class="articletext"><p><img src="../../htp_filemanager/source/AllImages/bob-van-aubel-ray-bans.jpg" alt="bob-van-aubel-ray-bans" /></p>
<p>This is a test.</div>
What I'm looking for is a way to add class="img-max" automatically when an image is uploaded through tinyMCE.
Using the style below would solve the problem easily.
<style>.newsdate img{width:100%; height:auto;}</style>
Try to use onChange event of TinyMCE to keep track when the contents was modified along with
addClass() to add new class to your image:
tinyMCE.init({
setup : function(ed) {
ed.onChange.add(function(ed, l) {
$('.newsdate img').addClass('img-max');
});
}
});
Related
Is it possible to change the background image for each view using Dojo Mobile ?
For instance :
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">View 1</h1>
<ul data-dojo-type="dojox/mobile/RoundRectList">
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-props='icon:"images/i-icon-1.png",
moveTo:"view2",
transition:"slide"'>Go To View 2</li>
</ul>
</div>
<div id="view2" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading"
data-dojo-props='back:"View 1",
moveTo:"view1"'>View 2</h1>
</div>
Example here : http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/View.html
If I put something like
style="background-image: url(../images/test-background.png) in the div section of view1, only the div will be backgrounded by the image whereas I want the whole body to be backgrounded. If I background the body with the image, the image is splitted in other views(since the views are in the same body) whereas I just want the view1 to be backgrounded by the image.
Any advice?
Thanks in advance
You can style the background of a mobile view using regular CSS.
See the example image below; it shows this demo with the Buttons view selected, styled with a purple background using the Developer Tools. If your background styles are not properly being applied to the view as a whole, please post your code or a snippet of your code that demonstrates the problem, as I suspect your styles are being applied incorrectly.
First answer works but not for the whole view, just for the div:
What works is :
<div style="background:yellow;min-height:100%" id="view0" data-dojo-type="dojox/mobile/View">
//whatever you want
</div>
What is important is min-height:100%
Without it :
With it :
jQuery noob here. Sorry if the question is really simple, I haven't been exposed to much jquery, though I am trying to learn.
I am attempting to move a DOM Element from one place to another, but I seem to be running into some errors.
When I attempt to test to see if the DOM exists I get indications that the element is not in the DOM:
if (jQuery('.ls-yourlogo').length) {
alert('Found!');
} else {
alert('NOT FOUND!');
}
I am trying to move .ls-yourlogo into .ls-inner.
I have tried several different things including:
jQuery('#layerslider_1').children('img').appendTo('#layerslider_1').children('.ls-inner');
also
jQuery('.ls-yourlogo').appendTo('.ls-inner');
I do know that the .ls-yourlogo and the .ls-inner DOM elements are both created with jQuery. I'm not sure if that is what is causing the problem.
I am currently working with the Layer slider plugin for WordPress: http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246
<div id="slider">
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<div class="ls-wp-fullwidth-container" style="height: 317px;">
<div class="ls-wp-fullwidth-helper" style="height: 317px; width: 1349px; left: 0px;">
<div id="layerslider_1" class="ls-wp-container ls-container ls-noskin" style="width: 1050px; height: 317px; margin: 0px auto; visibility: visible;">
<div class="ls-webkit-hack"></div>
<div class="ls-inner">
<div class="ls-layer ls-active">
<img class="ls-s-1">
<p ></p>
<p ></p>
</div>
<div class="ls-layer" >
<img class="ls-s-1">
</div>
<div class="ls-circle-timer"></div>
<div class="ls-loading-container"></div>
<div class="ls-thumbnail-wrapper"></div>
<div class="ls-shadow"></div>
<img class="ls-yourlogo">
</div>
</div>
Thank you for your time.
Finally found a solution for moving an element the Layer Slider DOM.
jQuery('#layerslider_1').layerSlider({
hoverPrevNext : false,
cbInit : function(element){
jQuery('.ls-yourlogo').appendTo('.ls-inner');
jQuery('.ls-thumbnail-slide > a').addClass('ls-thumbnail-style');
}
});
The ID is of your layer slider that exists on the page. Mine happened to be 1 so its #layerslider_1. The next important part is the callback cbInit, inside this function you can make your appends and what ever other markup changes you want to make to the DOM.
Hope this helps someone.
try this:
suggestion instead of you typing jQuery everytime use $ instead it makes it easier for you.
if ($('.ls-yourlogo')) {
alert('Found!');
} else {
alert('NOT FOUND!');
}
Also i would suggestion using #ids than classes because ids are lot faster to get in Jquery than classes. And Make sure you call your the script that makes .is-yourlogo class first before checking if it exits.
see this jsfiddleThe </div> tags in your html are not properly closed off, that might be contributing to part of your problem. If I close a few off and run my code, it removes the element with the class='ls-your-logo' and appends it to the <div class='ls-inner'> which ends up being the same place as it was before. Perhaps if you look at my fiddle, you can better close the div tags to how you want it to properly look
I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.
I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.
<div class="row BSlots">
<div class="Grid_4 fl">
/* This would be the code which would change */
/* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
</div>
<div class="Grid_4 fr">
<script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
</div>
</div>
Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)
Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags.
It is possible too, to do it via javascript.
If you want to use jQuery, you could do something like:
$(function(){
$(".Grid_4 fl").html(generateRandomImageHtml());
});
I have some problems with Javascript. In fact, I'm just newbie in that script language so I need some help..
Q: how to make this link active:
something
this link is just link to the div which is located in index.html file, so there is no loading of page.
and here is the div
<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>
Since you're just starting out, I'd suggest you use a library such as jQuery. So, if your HTML is like this:
<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>
<div id="box2" class="box">
<h3><a name="box2">something</a></h3>
</div>
<div id="box3" class="box">
<h3><a name="box3">something</a></h3>
</div>
And you have a CSS class called youarehere:
.youarehere { color:white; background:green; }
With jQuery you could write something along the lines of:
$(".box > a").click(function() { // when clicking any of these links
$(".box > a").removeClass("youarehere"); // remove highlight from all links
$(this).addClass("youarehere"); // add highlight to clicked link
})
In plain JS, it takes a bit more effort to achieve this. Do yourself a favor and don't reinvent the wheel - people have already taken care of this, so use the product of their labor to make your life easier.
a:active means when you click the link the css properties will apply on the link, instead of using a:active use
a.visited{color:red;}
To change the link text color on mouse over use the following css:
<style type="text/css">
a:hover{color:Red;}
</style>
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});