Hi i have one small issue. I have used Wordpress plugin to insert Contact Form 7 form into collapsed button, that is loading CF7 form when is pressed. Now i want that button to disapear after been collapsed. I checked and found this CSS class that is loaded when button is collapsed, and added just display:none but seems that is not working.
button#bg-showmore-action-5aa011ecd8ad50026368201.bg-showmore-plg-button bg-
orange-button bg-close {
display:none;
}
and this is entire HTML from that button:
<button id="bg-showmore-action-5aa0192e2a29b3050071453" class="bg-showmore-
plg-button bg-orange-button bg-close" style="
color:#4a4949;">Enquire</button>
Link from page where yellow button is present. How to hide button after been collapsed?
This is image before colapsed:
and this is image after been pressed the button:
yellow button is stick at bottom on end of form. I want to disapear after form been collapsed. I used this plugin to generate that button:
https://wordpress.org/plugins/show-hidecollapse-expand/
In your css code, notice the . (for classes) and # (for IDs) is not present in the code for some of the items. Try something like this:
Ok, saw your update... so to be more specific, try:
.bg-showmore-plg-button.bg-orange-button.bg-close {
display:none;
}
Related
Say I have an element with the following structure:
<Link to={`/games/${game.id}`}>
<GameInfo/>
<CustomButton/>
</Link>
Is it possible for the button inside the link to behave independently from the link beneath without using the z-index css property? I'd like to do this while keeping the current behaviour in which hovering the button triggers both the hover effect for the button and for the link below.
Right now, if I click on the Add to Library button, the game gets added to the library but the Link below also gets triggered and the game profile page is open, which is not intended.
The only solution I can think of so far is something like this:
<div> // <= move link hover effects here
<Link to={`/games/${game.id}`}>
<GameInfo/>
</Link>
<CustomButton/>
</div>
But it's not ideal, because I would still like the area around the button to be part of the Link (so hover and the link itself work in the areas shown below).
Is z-index the only solution?
You can make use of preventDefault and stopPropagation to achieve this inside button click use like this below
<Link to="/game">
<div>
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
//function to do your stuff
}}
>
Click Me
</button>
</div>
</Link>
You can check the demo here
https://codesandbox.io/s/adoring-sun-dwnde?fontsize=14&hidenavigation=1&theme=dark
I have a button in React which when clicked scrolls the page to the desired location, which is working.
<div className={styles.classB}>
<Button onClick={ScreenMover.MoveToElem} > Extras </Button>
</div>
But I wanted the same onClick feature without a button, say a link and when clicking it should do the same operation. So I have used the below Link button, but it is not taking the onClick instead it goes to the page top based on the to="" attribute.
<div className={styles.classL}>
<Link className={styles.linkButton} onClick={ScreenMover.MoveToElem} to=""> Extras </Link>
</div>
Another thought, if we can not achieve the above one, then can we have a button look like a link by applying some css style to the button? I should be able to override the inherited button styles and instead it should take the link look and feel. Is it possible and can we have a sample css class for it?
Thanks in advance.
The Link object is important for you?
If not you can use a simple <p> tag and the onClick event will working perfectly.
<p className={styles.linkButton} onClick={ScreenMover.MoveToElem}> Extras </p>
I have 3 buttons "Home","About" and "Contact". On page load I want only the "Home" button to be active. After clicking the "About" button, only the "About" button should be active and the rest 2 buttons not active. Similarly, after clicking the "Contact" button, only the "Contact" button should be active and the rest 2 buttons not active.
The word "active" here means that the button having different CSS (when compared to the other 2 buttons). I am using AngularJS as my front-end JS.
You will want to read up on the documentation for the Angular ngClass directive.
With ngClass you can bind a css class to a variable in your view.
Assuming you set the page on your $scope.
JS (inside your angular controller)
$scope.page = 'home';
HTML
<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li>
CSS
<style type="text/css">
.active {
background: blue;
}
</style>
If you're using ui-router then there's a directive called ui-sref-active which adds custom class when particular state is active.
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active
Here's a working jsfiddle which shows how it works. Point student.profile state which adds active class also on student state.
I'm trying to make a link on a webpage to link to another website.
It works in Google chrome but in IE and FF it's not working.
When i hover the link in chrome, it shows in the left bottom cornor the correct link. When i hover it in FF and IE it shows the link of the page that i am currently on.
this is the code i have on my .apsx page
<div id="return">
<button>
<p><a id="ReturnBack" runat="server" href="http://www.stuff.be">Terug naar de site</a></p>
</button>
</div>
i even added some javascript to force it to redirect
$('#return button').click(function () {
alert("oke?");
window.location = 'http://www.stuff.be/Pages/Home.aspx';
});
The alert triggers when u click the link, just to check if it works
And when in IE in the f12 screen i can use window.location = 'http://www.stuff.be/Pages/Home.aspx'; to redirect it. So they both work seperatly but not in combo :s
Is there anybody who can help me?? i just spend 2 days on a silly link :(
This is probably confusing to the browser:
<button>
<p><a id="ReturnBack" runat="server" href="http://www.stuff.be">Terug naar de site</a></p>
</button>
A button which contains a paragraph and a link? I don't think buttons can contain links. (After all, when you click on the link, are you clicking on it or on the button?) This is probably invalid HTML, which means browser behavior is going to be undefined and browser-specific.
Don't use a button, just use a link:
<p><a id="ReturnBack" runat="server" href="http://www.stuff.be">Terug naar de site</a></p>
You can style the link to look like a button if you want. But structurally it can't be inside a button.
Then just change your jQuery selector:
$('#return a')
(Or, conversely, remove the link and keep the button? It's up to you. But it can't be both.)
Side note: This has nothing to do with ASP.NET. What you're using here is HTML and JavaScript.
You can't put a link inside a button.
Remove the button tags and script and it will work like a normal hyperlink in all browsers. You can style it to look like a button if you need that.
Alternatively, remove the <p> and <a> tag from within the button, and keep the click script...
I am working on pictures inside ASP.net (VB)
and try to make this picture hide when the mouse over and show if it mouse out
How can I do this without using script or jQuery ?
help me please
You can do this in Javascript or CSS.
For example, to use CSS:
<img class="hideshowimage" ... />
and in your CSS
.hideshowimage:hover { visibility:hidden; }