So I have been working on a widget and I'm pretty much done with the exception of a little thing that is bugging me a bit. The widget script that users will copy and paste on their website looks like this.
<script src="http://www.example.com/widget.js"></script>
Then in the widget.js I have a line that adds an anchor text to the a tag like this.
$('.my-chat').html('Chat now');
I want the anchor text to be a certain color when active or on hover etc say blue and I have that described in its css file, however depending on the website it's placed on, their css may have other css properties for links and I realize that the anchor text of the widget gets modified depending on the website it's added on. I want to make the anchor text respect what I defined in the css of the widget, but I really don't know how. I saw this other widget that used labels, but I don't really understand what they are and how to use them.
Add this to your css
a.my-chat{ color:blue !important;}
a.my-chat:hover{ color:red !important;}
Related
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
I'm trying to mimic the new Tumblr Text Post that removes blockquotes so all the important text is visible in a 250px text post without having to scroll. Of course Tumblr hasn't updated their entire code so blockquotes are still wrapped in custom themes.
Here's what I have so far:
http://01244235.tumblr.com/
I unwrapped the blockquote tag. Now I want to remove the links of the users who have commented.
I know there isn't a simple way of just unwrapping the entire thing until Tumblr updates their codebase. So I'm just going to remove the links entirely.
So is there a way to pick up a specific part of the code and remove it? I don't want to just remove href links because the actual text post might have some in it.
So I want to remove every <p><a class="tumblr_blog" href=""></a></p> from the post.
Any ideas?
In that case you would write:
$('p .tumblr_blog').remove();
But why not just remove the {Blockquote} tags from the theme, rather than relying on a front end solution. Or even just hide it using css:
p .tumblr_blog {
display:none;
}
If you're just looking to remove it from the DOM, try:
$(".tumblr_blog").remove();
Is there a way to prevent styles and large fonts on a paste in tinymce? I have the content wrapped on display in the notes section below but tags still show increased fonts. I'd like just simple HTML like bold, bullets, and links.
.notes {
font-size: 14px !important;
}
Editors like TinyMCE always have problems with html code on pastes. You can fiddle with the settings as much as you like, it remains problematic. But it would still be my first advice to tweak the settings of TinyMCE. After that you could use another HTML filter, like:
http://www.bioinformatics.org/phplabware/internal_utilities/htmLawed
It's, afterall, always better not to have rogue code in your pages.
open tinyMCE.init and add this code:
content_css : "css/custom_content.css",
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values : "10px,12px,13px,14px,16px,18px,20px",
then you'll be able to use custom_content.css
From TinyMCE page (be sure to read for more info and examples)
Note: updating the actual content.css will have no effect. You need to create a copy and reference it in tinyMCE.init().
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 want to add a 'fancy' button to my page. I see two possibilities:
an a element with a picture as background and add a javascript function to the click event.
or
an img element and add a javascript function to the click event.
What is your opinion ? Which one is the better way to do it and why ?
Thank you !
Other options include:
A link that styled to look like a button using a background image
A Button element that is styled with a background image and no border.
An Input element with type submit or button styled with a background image and no border.
I find that that button element works the best, particularly if you want rollover hover effects.
jQuery UI has a button plug-in that will style pretty much any kind of interactive element into a fancy button.
Wherever possible, UI elements should be defined as CSS backgrounds. They are not part of the site content, so they don't really need to be indexed by search engines.
Semantically-speaking an A-tag implies a link, and therefore the event should be hooked up to the A-tag, not the image.
The first one. You have more options to style it, and it's easier to "theme" it as well. Imaging a "dark theme" and a "light theme", using CSS you can easily keep the same HTML but have totally different styles and images for your button. In some browsers, images are not necessary; you can easily create your button using pure CSS.
It depends on what you're trying to do.
On my project, we have a form that we want to submit using a button rather than javascript, so we're inserting a button element.
<button type="submit">Sign Out</button>
Then you can style the button using CSS.
Other than that, we use images for non-form buttons and javascript for the functionality behind them.
Not sure what you mean by 'fancy' button but first look into what you're able to do with CSS, look for example at http://hellohappy.org/css3-buttons/ or http://twitter.github.com/bootstrap/base-css.html#buttons .
If you want something fancier than that you should define a link in HTML, with and anchor tag since that's semantically correct and set it's background to an image with CSS. I don't see any reason to use Javascript for the click event as long as you simply want to make A GET request to some other page.
Semantically, <button> and <input type="button|submit|reset" /> elements are the correct choice for interactive elements within the page.
If you're simply styling a link to look like a button, then continue to use an <a> element, but define some styles and use a class, such as <a class="button">.
Pretty much any element can be made into a button, and if you use the correct attributes it will maintain semantics.
The following are semantically identical, but the <img> requires JS support:
<!-- the image is of some fanciful text -->
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" />
<input type="image" src="some/image.jpg" alt="Continue" />
If you simply have a decorative image that doesn't affect the content, you could use a span or div that's styled with CSS:
<span role="button" tabindex="0" class="button continue-button">Continue</span>
I'm pretty sure you can get that effect with plain CSS, no need for JS unless you want to call a function of some sort, and to spazz the button there is no need for a JS function.
You can simply use CSS actions (not sure they are named this way) like active, hover, focus, etc...
here is an example:
http://jsfiddle.net/RQucV/2/
it has a red color for background at first, changes to blue while clicking and becomes purple when visited. this is possible because i used a 'a' tag which has these properties.
i only changed the background color, but you can also changes many other elements, such as font, background image, margins, borders, you name it.
i think its cleaner to use pure CSS because of the JS clutter. if you want to add more scripts later, something bad is bound to happen when the browser has too much scripting to do. besides, parsing CSS might actually be faster than JS.
Just another tip if you go with pure CSS: not all browsers handle CSS the sameway, i highly recommend appending a "reset.css" to your stylesheet in order to make it play along the sameway in every browser you use.
hope it helps!