I found this great tutorial http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
Its easy to follow but i am getting stuck with the JS because i want to have more than one image on the page.
Can someone assist.
You dont need to edit your script (May be the selector).But you have to set two classes for each of your images, one is for common identity (will be feasible while selecting from Jquery) and the other one is to set unique styles to each pair of your images
DEMO
Related
I am a newbie with html and i need your support. Please look at my code:
https://fiddle.jshell.net/ghLoau6r/1/
Now I want to make a list of FAQs as table. The requirements are:
when we click to any link button (here we have 2 link buttons as 2 rows of the table), the background must be changed (not pink anymore, but another color)
when we click to any link button, the triangle at the beginning of the row also changes to another form (i created already but my code does not run)
when we click "show info 2", the corresponding "content 2" should be shown, instead of "content 1" now.
please help me, thank you guys very much !
So, not to be rude but there is so many things that need to be fixed here, that I don't have time to share them all with you. I'd strongly recommend picking up a book (HeadFirst HTML & CSS isn't bad, there are plenty others) and getting a solid understanding before continuing the work.
That said, the core problems to your specific question are that first, ID's should be unique (you have two elements with the ID of 'content1'). Second, your second link is looking for content1 still, even though you want content2. A quick fix would be to update the ID of the second content area ,and then update the anchor onclick handler to look for the correct ID.
That said, this is pretty far from an ideal or scalable solution, so please read up.
As commented, I think it will be hard to help without completely writing it for you. But I'd like to at least point out that you should move your JavaScript from inline/in the HTML into a separate JS file.
In your JS Fiddle, take this:
onclick="document.getElementById('content1').style.display=(document.getElementById('content1').style.display=='none')?'block':'none'"
And put it in the "JavaScript" section of JS Fiddle, inside of a $(document).ready() function. Use jQuery to register the onclick event to the behavior you want. Can include jQuery in your fiddle by using a jQuery URI such as https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
Godpseeed
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.
I would first like to say that this site has been incredibly useful for me as I have been learning web coding in my spare time. I have decided to register as I have a specific question I would like to ask.
I am working on my new website and a specific test page (www.owenprescott.com/home.html). I have come across a problem that I am hoping someone can help me with. I have a jQuery plugin that creates a hover effect over my thumbnail images and the inline code is causing an issue (jquery.dirinline.js), the function targets my (li) boxes and says this...
$('.da-thumbs > li').hoverdir();
The problem is that I have a couple of white boxes with project information wrapped in (li) tags. I do not want the white boxes to be effected by the above jQuery function. If you visit my site you will see what the issue is when you hover over the white boxes. I would be very greatfull on some input, either I need to alter the jQuery function or remove the (li) tags from the white info boxes however I am unsure how to get them to display correctly either way.
I hope I have not made this question to confusing and thanks in advance for any advice. Also as this will be my template page if you have any suggestions to improve my code feel free to let me know, I know I still need to remove the default Dreamweaver information.
Your JS can be changed to:
$('.da-thumbs > li > a').parent().hoverdir();
And it should work with the HTML as is. The ones you want to exclude would match li>div, but not li>a, so getting the anchors and then selecting their parents will get only the items you need.
So exclude them from the matched set. Use not() to remove them.
$('.da-thumbs > li').not(".someClassInfoThingy").hoverdir();
or check if it those info blocks will never have a link, you can do
$('.da-thumbs > li:has(a)').hoverdir();
I have been searching around for quite a while on ways to do this, and I'm beginning to think it's not doable. I can't say I'm an expert in html or CSS, but I have done a lot of research and found no tutorial for this specific problem.
I am coding a software user's guide to be posted online. The guide will include screenshots of the software, with figure numbers. The original code (I'm not the first on this project) simply hardcodes in the numbers of each image, which becomes more and more tedious as more information is added in.
I know there is a way to simply add in a new image and then tag the caption to include an automatically incrementing figure number. This would be very helpful, for if a new figure is added in, the numbers automatically change in all of the figures after the new one.
IF that were the only facet of the problem, I would simply use a CSS counter and be done with it. However, I also want to be able to reference specific figures in the text of the guide. My question is this: Is there a way to do this in CSS?
An example of text within the guide would be "Figure n shows the dialog box for customizing x." Is there a way to reference the nth figure in the guide without hardcoding the numbers?
If this is not possible in CSS, is there another language that can do it?
Edit: To clarify: The figures themselves would be labeled consecutively. But if I wanted to, within my text, refer to Figure 3, for example, that could be anywhere.
Edit 2: I have tried a javascript implementation using arrays. However, now it seems that some versions of Internet Explorer refuse to show the script portions of my code.
I am using the <script></script> tags within the body of my document, calling a javascript function located in the head. I know the syntax must be right because firefox and google chrome both load the page just fine. Is this simply IE being picky about something? (I checked, it's not my security settings).
Thing is, referring to things by their page index (incrementing) and by some figure number you maintain (also incrementing) are two identical solutions.
Actual problem: Maintaining the figure list with a sequence of ordered numeric identifiers becomes more difficult the longer a document becomes.
Solution: Give figures names, not numbers, and generate a number for display to the user. This gives ordered numbering to the user and allows you to reference figures with memorable names, but does not require you to reorder or modify figure numbers after every edit. Here's a quick example using jQuery:
<h2>How to add a contact</h2>
<img id="add-contact" class="figure" src="figures/add-contact.png" />
<p>This screenshot shows the location of the Add Contact button.</p>
<script type="text/javascript">
$(function() {
var figNum = 0;
$(".figure").each(function() {
figNum++;
$("a[href='#"+$(this).attr("id")+"']").append(" (figure "+figNum+")");
});
});
</script>
We are developing a social networking project, in this project we are adding content , e.g. images , video,audio,link(html).
Currently we are using shadowbox.js to show it.But for better and effectiveness we want to use some other better plugin, or want to make own window for showing images and link.
Please help , what is the best solution for this project.
I want to know this is the white board quesion means programmer.stackexchange question or stackoverflow quesion?
Thanks
There are 31 here:
http://www.dreamcss.com/2009/03/31-mind-blowing-collection-of-jquery.html
You should find one or more that suits your needs.
I would suggest using colorbox.js it can be found here :
http://colorpowered.com/
It is easily styled, comes with a pleathera of options including an image slideshow, can handle iFrames, Ajax content, Images, etc, and comes with a few options for styling to begin with.
Made my own div and use that for displaying content :)