I am looking to have a toggle button that will write to a CSS file on the server and switch between visibility:hidden; and visibility:visible on a DIV named building1
I cannot use a style sheet switcher because there will be quite a few of these buttons and DIVS .....it needs to write to the style sheet so the changes will be visible to other users.
Thank You in advance!
I think that this link should help you out. It appends to the stylesheet. I definately think that jquery is the way to go.
Or you could go for this Q/A
If you want the changes to be visible to other users, you'll need to make a call-back to your server so the server can modify the css file.
Example (probably not top-notch, but it works): https://gist.github.com/canihavesomecoffee/4d99b82503e044baaa6d933a7910c82c. I'll have to warn you though, using this way can cause quite a lot of stress on your server if it's called a lot. In that case you'd probably want to select all different ones in one form and submit that once instead of a call for each button.
Related
So far I managed to make my upload button act like a file input but now I don't want the browse button anymore and unfortunately I don't know how to get rid of it.
Any ideas?
The best idea for fixing this would be to create a custom file input. This might seem painful at first but is the best way to have full control over your file input design.
Look at https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ for one of the ways to do this.
Another way involves an ugly work around that is widely used. The thread for the following is Hide the browse button on a input type=file
I'm writing a custom web part that is intended to be hosted in SharePoint. The web part has a button, which when pressed performs an action. This action may or may not succeed. If it fails, I'd like to notify the user by displaying a <span> below the button with an error message.
To make this message stand out, I'd like to highlight it in a different colour or font. I'd like to reuse any existing error CSS style if at all possible. Does SharePoint define such a CSS style? If not, what's the best approach for displaying in-line error messages?
Well, silly me, it was right here on:
http://msdn.microsoft.com/en-us/library/dd586616(v=office.11).aspx
The magic CSS style is .ms-error, which as Madhur mentioned is colored red.
SharePoint by default uses red colored text to display error messages. You can use the same.
I am not sure if there is any re-useable CSS class exposed by sharepoint for that purpose.
You can check out all the exposed styles here:
http://www.heathersolomon.com/content/sp07cssreference.htm
Here you go.
Check http://jsfiddle.net/AbdK7/
I would like to implement the application where user can include the different CSS files when clicked on different buttons. Please let me know how this can be achieved. I don't want to use the theme feature.
I am trying to change the CSS but I have noticed the ungly behaviour as follows:
When using mozilla i see the source
code for page i see code for latest
CSS.
But its not getting downloaded/ tried using the tamper data request to download CSS is not getting sent.
When I inspect the elements style is still the old file
Any idea what could be causing this? Please let me know how to get this working. Desperately looking for a solution.
Can this be done nicely using the ScriptManager control ?
To change styles on the client-side, you need to programmably change the reference to the stylesheet, which would work. However, you wouldn't see this changed in the view source... view source isn't a running document, inspecting all the changes made by JavaScript... so that can be a pain.
Firebug is pretty good, but again, even with Firefox/FireBug, IE dev tools, certain things don't get updated, depending on what you are doing.
So did you write some code and you are not seeing the changes directly, or you see the changes but you can't verify them?
HTH.
In this case I would use xmlHttpRequest with GET verb in order to obtain the needed CSS file from a dedicated handler. Pass the name of the style sheet that you need to request as a query string argument. I suggest that you fire the request dynamically, on click of the button who should download the respective CSS file.
I'm using the jQuery UI Button widget to style all the buttons on my pages, but the button on a 'file' type input remains elusive. How do I style this button in general, and can I somehow apply the Button widget to it?
Here is a write up about styling the "browse" button (and problems therein) http://www.cs.tut.fi/~jkorpela/forms/file.html#present
File input elements are notoriously difficult to style.
There's a workaround described on quirksmode - check it out. I find it horribly hacky but it seems to work.
If you need more styling possibilities, you may have to look at a Flash-based uploader like SWFUpload. They work in a different way however - Flash uploads the file data directly - so you may have to change the way your forms work.
Here's my current workflow for editing CSS:
Me: "Take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
Another possible workflow:
"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.