Multiple Auto Click on href Links - javascript

I have read through various posts and searches online however have not got a solution as of yet. I have tried multiple articles here and elsewhere with little luck.
Situation: I have an accordion menu with members. I have some CSS and HTML working the image toggling. Meaning when you click a name is second col the image loads to the left in col 1.
Need: I need when page loads for each sections first image to load on page load.
I am using:
$(document).ready(function(){
document.getElementById("linkElement").click();
});
However this only loads one ID. I am looking for a script to handle 5 ID tags via the href links.
<li>Various Names first link in list</li>
so to be clear there are five sections that when the page loads the first image should be auto loaded.
Also: I am using the CSS and HTML to toggle this. It looks like:
#output img {
display: none;
}
#output img:target {
display: inline;
}
#output-2 img {
display: none;
}
#output-2 img:target {
display: inline;
}
This CSS handles the toggle between the href links per photo.
I am open to JS or JQuery
Please let me know if you need more info. Thanks in advance.

Related

How to make a HTML list appear vertically instead of horizontally using CSS only?

I'm designing a product page on Wordpress, using the Elementor and Woocommerce plugins.
I got a product data tabs made of an unordered list items from Woocommerce that shows the Description, More info and Reviews horizontally, and I'd like to style it to appear vertically with the Description, More info and Reviews text in the right of the tabs/titles.
This is the page I'm working on: This is my product page.
And I'm trying to make the Product data tabs similar to those here: This is the model page I'm learning from.
I tried to add this code in Atom, the program I'm using to edit the CSS code of the website, but it didn't help much:
.woocommerce div.product.elementor ul.tabs {
display: inline-grid;
}
.tabs .wc-tabs {
display: inline-grid;
}
.woocommerce-Tabs-panel .woocommerce-Tabs-panel--description .panel .entry-content .wc-tab {
display: inline-grid;
}
.woocommerce .elementor-4060 .elementor-element.elementor-element-6b584e4 .woocommerce-tabs .woocommerce-Tabs-panel {
display: inline-grid;
}
Can I customize the unordered list to make it vertical like in the example I'm learning from with just CSS, and to have that black line under the title from the model page that grows bigger only on hover? Editing the HTML file is a bit harder since I'm working in Wordpress and I'm not customized to doing that but I could try, and I don't have any knowledge of Javascript yet (if it's required, though I can edit the Javascript file of the website).
If you inspect the code, you can see that this styling is causing elements to align like that. Try to change display to flex
Try this
ul{
display: flex;
flex-direction: column;
align-items: center;
}

Bootstrap 5 dropdown open on hover and click to go to new url

has anybody got a way to make a bootstrap 5 dropdown nav open on hover but then also go to another page on click as well.
for example my dropdown looks like this:
<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>
And using the CSS to make it open on hover
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
On hover the dropdown opens a megamenu which shows the list of categories but I also want the user to click on the dropdown text to go to the main category page if that makes sense. but even know I have a href it does not go to that page because of data-bs-toggle, Any help would be appreciated.
In case you still haven't found an answer, here's what you need to do:
In the dropdown parent anchor element, change data-bs-toggle="dropdown" to data-bs-hover="dropdown". That's it. Now your parent link will work, too.
However, the data-bs-toggle attribute is needed for the dropdown to work on mobile devices (small resolution screens), so I my solution is to use jQuery to restore it on smaller screens like this:
$(document).ready(function() {
if($(window).width() <= 831) {
$(".nav-link.dropdown-toggle").removeAttr("data-bs-hover");
$(".nav-link.dropdown-toggle").attr("data-bs-toggle", "dropdown");
}
});
I just add this code in my css
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
If You Want to show dropdown on hover in bootstrap then you need to visit here here is very easy way to do that . there are less number of code of css and your issue will fix and if yout want to go to new url you should add attriute target="_blank" in anchor tag.
https://www.youtube.com/watch?v=owdqNLzII38

Trying to focus on a specific div on click of an anchor link

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>

How to hide this button using JavaScript?

We are using a .Net web application from a vendor. It has a feature for user to enter JavaScript and CSS for performing some simple UI modification. They are executed when loading the application.
We want to hide a button on the web UI temporary.
In F12 developer tools, we found the id for that button.
We used this CSS script to hide the button and it works.
#ext-gen391 {
display: none !important;}
However, the id is not fixed. It changes with different groups of login users. So that CSS script is not good enough.
I am thinking of using JavaScript but not sure how to start. Can someone help?
Edit:
Thanks everyone for the input. Sorry that I did not mention that other buttons have the id starts with ext-gen too.
It seems to me that the only "unique identity" I can refer to is the button's position.
How to hide that 3rd td element? Take note that the id ext-gen391 is not fixed. It will be different for different groups of login users.
First off that small snippet of CSS you have tries to select the button based on a class not an Id. Which is why it doesn't work.
You could use CSS
[id^=ext-gen] {
display: none !important;
}
or jQuery
$('[id^=ext-gen]').hide();
but, really, the best way if you have control over what gets rendered you should try and add a more unique id/class instead.
You could try using an id matcher like this in the css:
*[id^="ext-gen"] {
}
To select all the HTML elements that ahve an id that starts with ext-gen.
This should work:
td.x-toolbar-cell[id^=ext-gen]{
display: none !important;
}
if only the number changes, see attribute selectors for more info.
try you use css class name to do that.
You could solve it by putting your Open link inside the #show div
JSFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
This solution was used here.
Congratulations #Mathias

External html file not filling div

I've tried piecing together examples from searches, but can't quite get what I want to do to work. After trying for 3 days, I figured I'd reach out for help.
My goal is to open a hidden div and then load another page (from the same site) within it filling up the entire div. Ideally, I would like to be able to select any number of these external html files and have them load into that hidden div. Right now it is partially working, but the external html is only filling a portion of the div. It does the same thing for my local files.
Basically I would like to click any one of a number of links > open hidden div > load selected link > close and hide div > click different link > open hidden div again > load new link.
Here is what I have so far:
$(function () {
$('a#linkid').click(function () {
$('div#pagecontent').html('<object data="http://www.jsfiddle.net">');
$('div#overlayframe').slideToggle("slow");
});
});
<div id="overlayframe">
<div id="pagecontent"></div>
<div id="exitoverlayframe">exit
</div>
</div>
page link
#overlayframe {
position:fixed;
top:2.5%;
left:2.5%;
width:95%;
height:95%;
z-index:1000;
display:none;
background-color:red;
}
#exitoverlayframe {
position:absolute;
bottom: 0px;
right: 0px;
}
The demo provided is just loading jsfiddle into the div. What I'm looking to do is load an html file from the same domain. Not sure if that is important information or not.
Here is a demo of what I have so far
Demo
The object is taking default dimensions.
Add this to your css.
object{
height:100%;
width:100%
}

Categories

Resources