Hi so I am starting a new site and I have an idea of how I want it to be but I was wondering, how do you make a box with a little circle on the bottom left saying "read more" and when clicked a transparent box will open in the middle of their screen showing some more content. I don't even know where to begin, would I use JQuery?
There is a JQuery plugin called Colorbox. It is pretty simple to use and it does what you are looking for.
Related
Is there a way to add additional code to the slides widget so that the grabbing hand turns into the default mouse cursor? I only have text in the slides widget which pops up through autoplay, and do not want visitors to be able to swipe through the slides. Thanks in advance!
I tried code that turns the cursor from a hand to an arrow when hovering over images, but that did not work. Apologies, but I am not able to try much code as I am not experienced in code.
http://thenewcode.com/58/Simple-CSS-Hover-Image-Gallery
In this link, there is the markup for a gallery. If you hover over the thumbnail, the picture appears. If you click the thumbnail, the image will stay (otherwise it disappears). If you click anywhere outside of the thumbnail, the image disappears.
My question, what would have to be done to prevent the image from disappearing if you click somewhere on the page outside of the image/thumbnail? I want the image to stay once you click the thumbnail no matter where you click (unless you click another thumbnail for a new image).
I have very little experience with coding so help would be much appreciated. Also, it is necessary for me to use this exact gallery.
Thank you!
You cannot do this with CSS, because CSS cannot tell the difference between an item you have never hovered over and one you have finished hovering over. It only detects states, such as "not currently hovered over". So you have to use Javascript. With jQuery it looks like
$("dt").on("mouseover", function() {
// Hide other images only when we want to show a new one.
$("dd").css("opacity", 0);
$(this).next().css("opacity", 1);
});
Working JSFiddle
I have a button in my asp.net webform app which looks like it's selected (has a thin black border applied) even on page load. It's not a huge issue but it's quite evident as it's sitting next to a FormUpload control with a browse button (see screen shot):
All other buttons on the page don't have this issue. No css styling is applied (or any other).
I thought it might be that somehow the Upload button has focus on load but giving focus to another control does nothing. In addition, clicking another button doesn't remove the border on the Upload button.
In addition it's not like the css from another part of the page is effecting it as nothing has a black border surrounding it.
I know I could probably apply a specific bit of css to the button to make it look normal but this seems unnecessary, plus I would like to know why this is happening.
Any thoughts?
How can I edit the styling of these part of google +1 button? kinda hard for me to explain the detail in english. so I make this picture
I know it's located inside an iframe, some says that we couldn't edit the styles inside an iframe which sourced from other domain. but apparently, I have successfully styled my facebook like button to be looking good (transparent on the border). And also, I saw some other sites which have a nice looking google +1 button (without those blocking solid white background)
Edit: possible solution:
Looking at the markup and css on the page below it looks like somewhere in your css you must be setting the background-color of the div that the bubble is contained in to white or #fff. Try something like:-
.pls-container {background-color:transparent}
Do you have a link to this page, or a site that has a +1 button which has the same rollover so people can experiment? It would be easier to give a definite solution then...
Edit: just had a look here at the +1 buttons (at the top of the post and in the sidebar at the right) these both appear to be transparent borders - so there must be something different about your page. You could try looking at that page as an example and see where you've gone wrong, but without the code to your page it will be very difficult to give a solution to your problem directly.
I've tried the traditional Javascript rollover method and CSS background switching method, but nothing seems to work -- apparently when you're hovering over the close button you're actually...not.
Using Lightbox Gallery plugin in Wordpress.
Any suggestions?
Have a good one,
Andrew
button you're actually...not.
Indeed, You're actually hovering the whole picture (except the right and left third which is for next/prev button).
Try using FireBug, Use it and you'll know what are you really hovering over.