Hi all I just want to allow user to download image on click of button .
I have used tag in my project and its download attribute which is provided in html5. My following code working fine on Chrome but in Firefox Mozilla when I click on button it just redirecting me on the specified path.
Please tell me what is going wrong .
<div style="display:inline-block; position:relative; ">
<img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
<a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png">
<input type="button" style="position:absolute;bottom:0;right:0; " value="Download">
</a>
</div>
Thanks in advance.
According to the HTML5 definition of the a element, it must not contain “interactive descendants”, and input elements are by definition interactive. The markup is thus invalid. All bets are off. The nesting rules are set to avoid complications in event handling.
So if you want to have the download attribute and some button appearance, you need to use just an a element and style it to look like a button. Here’s a sketch, to be tuned according to your preferences for button style:
.dbutton {
position:absolute;
bottom:0;
right:0;
color: #000;
background: #ddd;
border: #333 outset 2px;
border-radius: 3px;
text-decoration: none;
padding: 0.1em 0.2em;
font: 90% sans-serif;
}
<div style="display:inline-block; position:relative; ">
<img src="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" title="" alt="">
<a href="https://stemvideodev.s3.amazonaws.com/6b72051541e948cb8ace2d83d3895901-THUMBNAIL-1.jpg" download="image.png"
class="dbutton">Download</a>
</div>
<div class="text-wrap"><img src="your img.jpg" alt="">
<a href="download.jpg" class="myButton" download="img name" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
Can you please try like this..
Related
(First time using StackOverflow, apologies if my formatting is wrong)
As a background: I'm trying to unify live chat from both Twitch and Youtube so they can be both show in the same page at the same time.
Most popular site that does that, StreamLabs, unfortunately doesn't work very well for that, since messages coming from Youtube sometimes get "stuck", which very often make them stop appearing and then they appear all at once.
After checking for alternatives, I came across a site called Botisimo that does that and doesn't have that problem that StreamLabs has, but unlike Labs, I can't manually edit the HTML/CSS/JS of the now unified chat. It shows up in a very simple manner.
How it shows the messages
However, as I'm putting that chat as a browser page in the streaming software, I can manually edit the CSS of that page, but nothing else, which shouldn't be a problem.
The problem appeared after I inspected the page to see the names of the divs/spans I had to change in the CSS: There's 2 spans with the same name.
You can see in the image that before the username, there's 3 badges. Those 3 badges and the username are both called "name"
The code that shows after each message is sent is:
<div class="flex-none message chat" data-platform="twitch" data-name="MOD_LeviathaN" data-message="Testing">
<span class="name">
<img src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1" style="margin: 0px 1px;" alt="broadcaster" height="18">
<img src="https://static-cdn.jtvnw.net/badges/v1/09606a1c-6cb2-424f-bfb4-3893d1a4dd6f/1" style="margin: 0px 1px; background-color: white;" alt="subscriber" height="18">
<img src="https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/1" style="margin: 0px 1px;" alt="premium" height="18">
</span>
<span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;">
MOD_LeviathaN
:
</span>
<span class="text" style="color: rgb(0, 0, 0); font-size: 24px; line-height: 120%;">Testing</span>
</div>
So when I style that , it does the same styling on both of them:
Like this
And I want it to show like this:
Desired style
This is how it shows on StreamLabs, which have a variable for the badges and for the name itself, and are obviously different. They're both on the same div class, so the styling is applied as intended. On Botisimo however, the messages are also included in the same div class as the other 2, so It gets styled as well, which is not the desired effect.
Is there a way to either split the badges from the username, or put the message outside that div so it doesn't get styled with both of them, using only CSS since I don't have a way of modifying both the HTML and the JavaScript?
I also tried to hide the badges at least, using the following code:
img[alt~="broadcaster"] {
display: none;
}
img[alt~="subscriber"] {
display: none;
}
img[alt~="premium"] {
display: none;
}
This did get rid of the badges, but the style still applied to a small part that was still technically there.
Like that
Thanks in advance for all the help. If there's another completely different site that does the same thing (unifies the chat), I'm willing to try it as well.
If you want to create similar style to the one you mentioned(Desired style) enclose the both span with class="name" in a div or span and apply the css to that div.
actually when you apply css to class "name" it apply on both seperatly when u will enclose it in a div and apply css to that it will be apply to both as one
see css selectors and try to resolve it using id
Can I asked you a question, if you don't mind?
Have you tried putting
<span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;"> MOD_LeviathaN : </span>
inside the <span class="name"> <img src="https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1" style="margin: 0px 1px;" alt="broadcaster" height="18"> <img src="https://static-cdn.jtvnw.net/badges/v1/09606a1c-6cb2-424f-bfb4-3893d1a4dd6f/1" style="margin: 0px 1px; background-color: white;" alt="subscriber" height="18"> <img src="https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/1" style="margin: 0px 1px;" alt="premium" height="18"> </span>
cause I heard it is possible to do it. Then on the <span class="name" style="color: rgb(167, 166, 166); font-size: 24px; line-height: 120%;"> MOD_LeviathaN : </span> try putting an ID on it so it can be separated to the other span you put
Can you somebody tell me how can I create hover effect of background and icon? Because all icons have same class name.
This is a code of facebook
<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
<span class="vc_icon_element-icon typcn typcn-social-facebook" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://www.facebook.com/" title="" target=" _blank"></a></div>
</div>
This is a code of twitter
<div class="vc_icon_element vc_icon_element-outer vc_icon_element-align-center vc_icon_element-have-style">
<div class="vc_icon_element-inner vc_icon_element-color-custom vc_icon_element-have-style-inner vc_icon_element-size-xl vc_icon_element-style-rounded vc_icon_element-background vc_icon_element-background-color-white">
<span class="vc_icon_element-icon typcn typcn-social-twitter" style="color:#000000 !important"></span><a class="vc_icon_element-link" href="https://twitter.com/" title="" target=" _blank"></a></div>
Maybe target that .vc_icon_element and add something like this:
.vc_icon_element:hover {
background-color: red;
}
or to target that span
.vc_icon_element:hover span {
background-color: red;
}
white button
I was trying to make a vertical navbar with a background image. But as I clicked the button, they turned to white. What steps can I take to make them stay white? Like, I've tried primary-outline stuff I searched, but it doesn't work out.
Have you tried to define pseudo classes for your button, link?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}
I have solved this myself. It was because there was a fault in my markup. I added inside . But I still don't know why this is wrong. Here's the codepen:
<div class="paintallblack">
<div class="row">
<!--let's row this. Like, 1 md for vertical navbar, 5 md each for the rest -->
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
</div>
</div>
http://codepen.io/Hertzsprung/pen/JEKxwN.
Bootstrap default style is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
Override the style btn-link border-color:#fff; not transparent
Here is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}
I have a slideshow that is imported with a shortcode in WP.
I'm trying to add custom css to each 4th image that is displayed, but with no luck.
Any help would be awesome, thanks.
.thumb-res .ngg-gallery-thumbnail:nth-child(4) img { border: 1px solid #000 !important; }
HTML:
<div class="thumb-res">
<div class="ngg-galleryoverview" id="ngg-gallery-97131261c1bb7b3c15f04e8ef0f97c77-1">
<div class="slideshowlink">
<a href='url'>[Show as slideshow]</a>
</div>
<div id="ngg-image-0" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='48' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide4" alt="slide4" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
<div id="ngg-image-1" class="ngg-gallery-thumbnail-box">
<div class="ngg-gallery-thumbnail">
<a href="url" title=" " data-image-id='46' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
<img title="slide2" alt="slide2" src="url" width="174" height="150" style="max-width:none;"/>
</a>
</div>
</div>
Your ngg-gallery-thumbnail elements are all single children of their respective parents, so the selector never selects anything. You should select based on elements with the class ngg-gallery-thumbnail-box, which are all siblings:
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4) img { ... }
That said, this is still not going to work exactly as expected because it looks like there are also siblings that are not thumbnail boxes.
This:
$(".thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1)").addClass("fourth");
FIDDLE
try
.thumb-res .ngg-gallery-thumbnail-**box**:nth-child(**4n**) img {
border: 1px solid #000 !important;
}
with your code you're selecting just the 4th image. you need 4n for each 4th:D
You need to use nth-child(an+b) for direct siblings.
.thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1) img { border: 1px solid #000 !important; }
Also for add custom css to each 4th image that is displayed you need to use argument in format of "an+b".
For example 4n+1 select 4th, 8th, 12th element etc.
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>