I am attempting to use fine uploader to handle some file uploading in a web application I have. I would like to do some restyling but I am stuck on something. In the documentation on restyling they have the following line:
The default drop area, button, and file list elements are also, by
default, contained in this option.
referring to a parent div with the class qq-uploader.
My question is if I can move certain pieces out of this div (in this case the file list elements). The fact that they say "by default" seems to suggest it can be done, but I haven't seen any documentation on how to do it. Has anyone done this before? Can someone point me in the right direction.
I have done this before..but it was little styling..
i have to do is change little bit qq.FileUploader in these properties:
template which define the template for the whole uploader.
fileTemplate which define the template for one item in file list.
I was using older version(i think 2.1)..
my advice to you is to open the js file and look into it..it's good commented and 'll teach how this uploader is working.
You can define a new container to hold the file list, and place it wherever you want. See the listElement option. Probably no need to modify a template in this case.
Related
I am new here.
Just want to ask several question to anyone experienced in this field.
So I have just bought a php website, and the case is that the owner of this theme seems a bit strict with copyright stuff, so he placed his own identity in almost every way.
In example, the website named "mcdonalds", he have almost in his entire css class after his name/brand, example .mcdonalds_header , or .mcdonalds_style.css , etc .
Now my question is,
Is it possible to change entire css class dynamically?
I meant, if I open it through text editor maybe I could replace them all by hitting Ctrl+H and replace "mcdonalds_" with [nothing].But of course it will return many errors as the entire php and js file are associated with those class.
What I want in example I have
index.php with 8 div have class "mcdonalds_grid"
style.css file with class "mcdonalds_grid"
is it possible to edit the class in css "mcdonalds_grid" to "gridStyle", and then the entire 8 class in the file changed automatically, too?
Because I am not sure to do it manually. In my case I have up to hundred thousands to be edited. It sicks. And if you asked the reason I need to do this, so it looks more professional using my own brand rather than using mcdonald's stuffs.
Any view would be appreciated.
Thanks!
Others have mentioned Jquery.
You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.
Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).
I personally don't suggest to make these types of edit but if you must need to do then follow the process:
From the answer of the question
You can use IDE to change something in the whole project. I would suggest NetBeans. It's easy. Just add the project to NetBeans, click on edit (in the top left corner) and then click on Replace in project.. ( check in the bottom of the popup)
then
On a website, I see some charts with animation. I am sure they have used a plugin to design those charts but which one, I DONT KNOW...
Is there any way to find which plugin or .js file is used ?
I right-clicked on the chart and clicked "Inspect Element" too but no success. Can't seem to find the correct chart or the code that invoked the animations (hover, mouseOver etc)
The theme I am looking at is here
If you look at the chart underneath VISITORS, and hover over any line, it shows some values. I want to know what is triggering the show of these values.
EDIT
Muhammad answered helped me a lot. Here is what I did for someone looking for the answer.
I right-click on the plugin that I wanted to know more about, and looked at the ID and the class of the same.
By the look of it, i could see that some plugin called 'HighCharts' is used. Then I pressed
ctrl+Shift+F
After that the search option was shown to me, which I couldn't notice since it was right in the bottom of the screen.
I entered "High" in the search bar and it showed me the script and the javascript file that was used to call it.
Hope this helps
For checking which plugin they are using for this. Right click and go to inspect Element and then check the parent div class which contain the particular chart of something and after that go to sources next to the network and for the main.js OR custom.js OR app.js You can quickly search by press ctrl+shift+f or simple look into js folder and search for the class that you got from the inspect Element and you will find which function they are using for this class and u will have idea from the function name and you can search for that partical file.
Ex:
This is a simple example I hope you have got the better idea.
Step 1
Step 2
Step 3
I don't know if it's even possible, but here we go.
Im in a .NET project and we have this .js file that serves the purposes of a flyout menu (link)
and, on the same page we'd like to have one of these comboboxes
Thing is, when we add the combobox the button at the right, the one you click in order to get all the possible selections, is just not there. After trying several things we got to know that if we just commentante that flyout .js file the combobox works just great. It seems like those javascript codes are messing with each other.
So, can I tell the combobox to not pay attention to that .js file? Is there any workaround to solve this matter?
EDIT
I created this jsfiddle. As you can see, the combobox is not complete, its button is somehow truncated. (the menu wont get you to anyplace since its tree is gotten from a .html file which is not present in the fiddle.
This other fiddle shows that if we remove the menu.js code, the combobox works propertly
To make your fiddle work, change this line
$.fn.menu = function(options){
to
$.fn.menuFlyout = function(options){
Working fiddle.
Explanation: the function menu() is defined twice - once in both libraries you use, flyout and jqueryui.
Rename that function and make sure you use .menuFlyout() when you build your menu.
I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});
I am learning JS currently with a js book.
A rollover effects example got me, so I need some help.
I upload a snapshot on Flickr.com. The url is : http://www.flickr.com/photos/58745632#N05/5389380030/
The left side of the snapshot is the page and the right side of the snapshot is the javascript code.
My question is can I change the content in the red box to the codes in the green box.
If I can, why does the author bother to add this line "thisLink.imgToChange = thisImage"?
And what is the relationship between "thisLink.imgToChange" and "thisImage"?
Are they the same one or are they identical ones?
Could someone explain it for me?
Thank you very much.
thisImage is the reference to an image object. It is being passed as a variable to the function.
An image object has properties like the source (.src), .width. height etc.
thisLink is also an object, and it can have properites too. So, thisLink.imgToChange = thisImage sets the "imgToChange" to the image fed into the function. imgToChange is a completely arbitrary property chosen by the programmer. It's being used stash some data used later.
All this code demonstrates the "hard way" of doing a rollover. Having to type (or even use) "document.getElementById" over and over again all of this is a pain. Most of the time we depend on scripts to automate these things.
Frameworks, which are basically optimized versions of the type of code you're working on here, were developed to take care of the dirty work. The most popular framework, by far, is jQuery.
Doing pretty well the same thing using jQuery can be done in one line of code.
Here's another posting as an example.
Short answer:
.imgToChange and thisImg refer to the same place. .imgToChange is added as a property so it's easy to use later, like in the onmouseout function.
UPDATE
Regarding your comment: It won't work either way (probably).
Since setupRollover() is called multiple times, the variable thisImage will point to a different image node every time it's called. The code in the green box will only be applied to the most recent thisImage.
The red box uses this because that means "the object that fired the event". The red box sets up each object to refer to the appropriate image. Then, when this is moused over, the correct image is changed.
Try it out yourself, it's easier to see than to explain.
Given that this is straight out of JavaScript & Ajax for the Web: Visual QuickStart Guide, 7th edition1, what in particular are you having trouble with in the (line-by-line) explanation on pages 96-97?
1 Co-written by me, btw.