I have a Twitter button on the page using the widget. The button renders as it should unless I place it into a hidden container.
I would like to place the share button into a hidden container that only shows when clicked. I have all of the functionality working, however the Twitter button will not show if placed into a hidden container.
You could use the CSS tag display: none then remove the tag when you click the button and add the tag back whenever you are done sharing to Twitter.
Something like this:
HTML
<input type="button" class="clickMe" value="Click Me" />
<img src="img/twitter.png" class="twitterPic hideMe" />
CSS
Assuming you have a separate style sheet.
.hideMe { display: none;}
JavaScript
$(".clickMe").on("click", function () {
$(".twitterPic").removeClass("hideMe");
});
Here are some links to the JQuery pages to add and remove classes:
https://api.jquery.com/removeClass/
https://api.jquery.com/addClass/
You could try the following:
place the container outside the viewport by setting its left or
right property to sth like 5000px .container {left:5000px;}
take off the display:none css
rule that's causing the problem. This way the twitter code should be
able to fire properly when the page loads
then set the container's position by using
the offset() function when the user clicks on the button. This way
the container will show where you want it to
Related
I am trying to get focus on a specific div on click of an anchor link.
Here is the code
Link
I am facing a problem that the view is rendered from different partial views like header footer etc.
The header contains the link to a particular div from another view and it has a sticky navbar. When I click the link on nav bar it does focus on the div. But some part of div hides behind the header navbar.
Which looks clumsy according to the UI perspective.
Here is the navbar code:
<nav><li>Link</li></nav>
The example code for page div could be something like
<div id="divname">Some Content</div>
Please give me a clue how can I get the div to show just beneath the sticky menu bar.
Try with giving some margin-top to the div you want to focus on clicking, so that, the navbar will not hide your div and then change your href from
href="somepage.html#divname"
to
href="#divname"
only. Always give unique ids or classes to the elements in HTML so that the machine will not get confused between them and treat two different elements the same way. Hope this will work for you. If not post a response for help.
There's plenty of questions like this one on StackOverflow. Try this one for example:
https://stackoverflow.com/a/59380086/1973005
You can add a pseudo-element (::before) to the linked element in CSS, using the following settings. This creates an invisible block above the linked element which again creates an offset for the linked element position, since the top of that pseudo-element will actually be the position of the link anchor.
.anchor_offset::before {
display: block;
content: ' ';
height: 10em; // Whatever height your navbar is
margin-top: -10em; // Whatever height your navbar is
width: 100%;
visibility: hidden;
}
<div id="divname" class="anchor_offset">Some Content</div>
I am trying to create a sweet looking Button in Bootstrap. I have 4 images which show the discrete states of my button (Normal, Hover, Pressed, Disabled).
But I cant figure out what the best practice for this is. using the src in an input type image doesnt seem to be working that nice, since browsers will create a blue rect when clicking.
(I just need the whole image to be the button, its not a logo or smth that needs to be displayed on a certain position)
EDIT: its for my custom facebook/google/outlook login buttons
You need to replace the url's with the images you have.
.fb {
background: url(http://placehold.it/50x20/00ff00);
}
.fb:hover {
background: url(http://placehold.it/50x20/0000ff);
}
.outlook:disabled {
background: url(http://placehold.it/50x20/000000);
color: white;
}
.fb:active {
background: url(http://placehold.it/50x20/666666);
}
<button type="button" class="fb">button</button>
<button type="button" class="outlook" disabled>button</button>
Best practice will be to use :before elements where You will be displaying image on "button".
You can use img tag inside anchor tag to do so
For toggling between the states you can use jQuery.
Let me know if you require any further help!!
I have a mobile menu on responsive, which use a javascript to show all of the elements from the menu. It puts on my <ul> a css code display:block on the element. So on a specific screen in my case:
#media only screen and (max-width:980px){
ul {display:none}
}
If I want to override it with a display none, it doesn't work because the display:block it is inline. I tried to change it like this :
.myclass .myclass2 ul {display:none}
but still doesn't work. I do not want to touch the javascript. How can I override it ?
If you have an inline style as you said display:block the single why to override this from within a CSS file is by using !important. But that wont work in your case if you want to show the menu at a click of a button.
I would use 2 classes for this, one to show the menu and one to hide it, no inline CSS and no !important. On window.onload/document.ready event I would take the width of the document and if its greater than 980px I would add the hidden class to hide the menu, when user clicks the menu button I toggle the show class. The same thing for window.resize event.
In my code, I have a div tag with type="hidden". I just don't want to show the div. If needed, I will show it using JQuery Show().
But, using this, my div is not hidden from view.
Edit:
Now I hide the div by using
<div style="visibility:hidden">XYZ</div>
If I need to show it again, how can I?
try using style instead of type
<div style="display: none;">content</div>
type="hidden"
is used only for hidden input textbox.
If you want to hide you div use :
style="display:none"
Or with JQuery hide your div with hide().
Use display: none to prevent the div from being displayed and layout space won't be reserved.
Use visibility: hidden to simply hide it (like 0% opacity), but the necessary space will be reserved.
If the DIV isn't absolutely positioned, "display:none" can crash the overall structure of the document.
You may use:
<div style="visibility:hidden"></div>
This will make the DIV invisible.
By using style="display:none" , can hide the div
Define a id for that element
To hide element in javascript
document.getElementById('elementId').style.display= 'none' ;
To hide element in javascript
document.getElementById('elementId').style.display= 'block' ;
There is another way. Let's say you have:
<div hidden>content</div>
In the css:
div[hidden] {
display: none;
}
Greetings,
I have written a modal using jquery UI and it appears at the front of a flash movie thus the html inside the modal becomes corrupt, I tried to hide the movie right before modal gets triggered and reappears after closing the modal, works well but each .hide() and .show() the flash movie gets resetted while all I want is to hide (without removing the movie) and displaying it once it is triggered to .show that modal div.
Tested in FF/linux, FF/WinXp, IE/WinXp, Safari/WinXp:
put your flash container DIV into a new DIV with overflow:hidden.
basic:
to hide flash-div: $('#id_div_with_swf').css("left","-2000px");
to show flash-div: $('#id_div_with_swf').css("left","0px");
or, show and hide with animation effects:
to hide flash-div: $('#id_div_with_swf').animate({ left: "-2000px"},1000);
to show flash-div: $('#id_div_with_swf').animate({ left: "0"},1000);
html example:
<div style="width:200px; height:100px; overflow:hidden;">
<div id="id_div_with_swf" style="width:200px; height:100px; position:relative; left:0px; top:0px;">
<!-- flash here -->
</div>
</div>
you can't get a cross-browser working solution with .css('visibility', 'visible'/'hidden')
Working solution:
Use $('#myvideo').css('visibility', 'hidden') to hide and
$('#myvideo').css('visibility', 'visible') to show the div containing the video.
Just tested it with firebug.
EDIT:
Please note, this is different from .hide() and .show(), as they use the display css, instead of visibility.
Perhaps move the movie div off the screen. Set it's Left position to be -1000 or something like that?
Then replace when the other div has disappeared?