Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to add an existing capability to another part of our system. It was originally written only for one part of the system, but we want it available in another one.
So I basically copied the code (which was a huge javascript function) and pasted it into the new part of the system. Well, everything works great except for one html table that is being displayed as hidden. Everything around it is visible. But for some reason this one table is not displayed. I am guessing that because I copied it into another area, that it is inheriting some type of hidden attribute, but I have looked around everywhere and don't see anything that would be making it hidden. I am sure if I knew my own environment I would have a better idea of where to look, but this environment is so complex and i'm not used to web development and javascript and CSS. Is there someway to quickly fix this by overriding any attributes that the table might have inherited and just force it to be visible? that would be the easiest fix if it were possible.
Anyway, if you can think of anything, please advise me. Basically I have a mystery hidden table that is being hidden because of something higher up the chain (that it must have inherited) and I am not knowledgeable to figure out where it is happening.
The Best and most probably the easiest way to debug it(without getting through the lines of code) is to open the webpage in chrome, right click on the page and go for inspect element. There you can see the HTML code in the bottom panel. Find the HTML code for the table and hover over it, then you can find the position of your hidden table. Then check if the table has some css class attached with it. If yes click on the css class in the HTML code, then you can see the css table attributes in the bottom right panel. Change the value of position or any other tag to find any visible changes. GOOD LUCK!!
If you know the classname of the table and have jquery just do
$(".ELEMENTNAME").show();
probably the easiest way.. If it's an ID for that particular table you'll have to use
$("#ELEMENTNAME").show();
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I want to create a really simple blog and so far I learned HTML and CSS.
So if I want to add a new node or article, do I need to modify my HTML document and then upload it again or is there any other way?
If you're only using simple HTML
Then the css should be made in a way that would make it reusable, so that when you just add another article shouldn't affect anyhing else. The HTML however must be changed, as you'll need to add your content somehow
The thing is, no one uses plain HTML anymore. If you want everything to happen dynamically then you should use DOM manipulation frameworks. The most basic one of which is JQuery, while the most powerful ones as of now are React, Angular, and Vue
Well, of course you have to modify something and upload it again, but not necessarily the HTML code.
You could youse AJAX (Asynchronous JavaScript and XML) - which, by the way, you can also use with JSON instead of XML - then create a standard article model, get the latest article from your file with
fetch("your-file.xml-or-json-or-whatever").then(
function(response) { /* Do something with the response, see the link below for an example */ }
);
and finally turn it into a DOM element with JS.
This method is pretty inefficient, though, if you don't have a way to cut the output from your list of articles. In fact, if, say, you have one thousand articles, it's inconvenient (inconvenient to say the least) to serve them all and the just use the first ten. If you have a static server, you might want to split the content into multiple files. If, instead, you have access to PHP (or other HTML preprocessors), then you should consider cutting it dynamically. Below are some links to help you.
AJAX tutorial on W3Schools
Fetch documentation on Mozilla Developer
You could also think of using frameworks like Angular (or AngularJS) to make your website even more dynamic. However, those are better for web apps than websites, as I've heard that it's a bit harder for Google to register an Angular app.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am making a website in WordPress using a theme called Hueman. I want my whole site in fullscreen and get rid of the borders on the side (I'll show in a picture).
Can't find where to edit this.
I need to remove the borders 1 and 2 and make it fullscreen and responsive on other browsers/devices.
You can achieve this by adding this as custom css (tested and confirmed just now on latest heuman version)
.wrapper,
.container,
.container-inner {
max-width: 100% !important;
width: 100% !important;
}
Note:
Don't make changes to original theme files, preferably make a child theme or else use custom css option
As told in the comments, there is a function in most themes (mostly non-free themes) to edit the appearance without changing any code. Often themes install this tweak-UI in the controll panel on the left, using it's own name, adding sth like "options" (e.g. "[myThemeName] options"). Be sure to check that before you change anything in the css-files.
If there isn't any options-menu you should check the structure of the php-file you want to load. Mostly you'll find sth like a "container"-div, which should be one of the first div-instances. Take the id/class of that div and add a rule to the css file, making its width to 100%. Before you add a new rule first check if there is already a rule declaring sth for this div.
Hope that helped you!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I use a website that recently changed its layout, which I (and a lot of other people) extremely dislike. I checked over the changes, and I believe that most of the changes involve a simple css change.
I own a domain that I would like to display the contents of this website, but with my own css, however I am unfamiliar with the web. I am open to all solutions that would do this (embedding, reflecting, etc.) I would like to do this without paying money.
*Note: the reason I am avoiding using a userstyle is because I would like to be able to access this website on any computer, anywhere, anytime, and let others do the same.
The website in question is http://www.scarsdaleschools.org/, and I would like it to look like this.
I know there might be some conflicts with the using the old css on the current website, it is okay as long as it is usable.
I will give an additional 50 point bounty if the solution does not involve me hosting my own website.
Clarification: I am not looking to create a mirror for the website, I would like a client to access scarsdaleschools.org directly, only replace all css documents with my own css, thus all content is accessed directly from scarsdaleschools.org.
EDIT: This was put on hold as too broad. I am looking for a method by which I can accomplish what I am trying to do.
According to the help center:
There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow down the answer set or to isolate an issue that can be answered in a few paragraphs.
Chances are, there is probably only one way (or a small few ways) that can answer my question. Regardless, my question does not require a few paragraphs, but just a simple name of a technique (and hopefully a small explanation of how I would use this technique).
Well if you don't mind having to put some insane amounts of !important in your CSS for it, the iframe tag is actually powerful enough to do it (doesn't even need the proposed-then-cancelled seamless attribute).
I'd still suggest using something like a portable browser on a flashdrive/CD, and having your userstyles installed on that, instead, as it's a little less red-flag-inducing (your site may be flagged as a potential attack site w/ the iframe trick). Added bonuses, it dodges corpsec spyware and update restrictions, and has all your bookmarks/addons.
But simply iframeing the website from your own with your stylesheet (loaded with !importants) will suffice, so long as you can get around any framekiller they use (if any).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I've recently starting coding my layout with responsive properties. I personally HATE mobile websites, but to accommodate my visitors, I've decided to make my site responsive.
What I cant figure out is how to disable responsive properties when I want to.
I want a link on the top of my page that when clicked will toggle the mobile site on/off.
Can this be done?
Thanks!
First thing that comes to mind is a JavaScript (/ jQuery) function that adds or deletes a CSS file from the HTML lay-out when the switch is one way or the other. You would have to make a separate CSS file that only contains your responsive media queries but that shouldn't be a big issue.
If you are using a server-side language, one way to do this is to provide a link with query information such as http://mywebsite.com/?full=1 for viewers who want to view the full site. You would check to see if the variable full exists in the query data and check if its 1. If it is, then you would set a related full session variable to true. Then whenever a page is loaded, check to see if the session variable full is true. If it is, then serve the "Full CSS" file. If it isn't, serve the "Responsive CSS" file. You could use cookies instead of session variables I believe. I'm a little rusty in the server-side department.
You could also do this in JavaScript using cookies.
I think the easiest way would be to put the responsive parts of your stylesheet in a separate file, for instance responsive.css. Then you can bind a javascript function to a link that toggles that stylesheet:
In the <head>:
<link rel="stylesheet" href="responsive.css" id="responsiveStyle">
In the <body>:
Toggle
Javascript:
function toggleResponsive() {
var responsiveStyle = document.getElementById('responsiveStyle');
if(responsiveStyle.rel === "stylesheet") {
responsiveStyle.rel = "";
} else {
responsiveStyle.rel = "stylesheet";
}
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm very new to html, css, java, code in general, and I was trying to figure out how to add more than one image within one single line of code.
I'm trying to create a really simple click-through image gallery with no flare or crazy tricks?
Any help would be much appreciated.
No. Image tags can have only ONE src. If you want multiple images, either use multiple image tags, or use some javascript to change the src of the one image.
Whenever you wonder about any HTML tag look it up at W3C (They are the authority when it comes to web standards) The imagetag is found here:
http://dev.w3.org/html5/markup/img.html#img.attrs.src
What would would probably want is to change the image src attribute using javascript, or some library like jQuery. This will also let you do more advanced scripting later on.
It could look like this in pure javascript:
document.getElementById("img").src = "foobar.jpg";
As #Luiggi says: no. You can't do that in HTML. The img tag is for a single image.
If you want to click through things, then you need to have the appropriate user-interaction event handlers, and a bunch of separate objects to switch through. Doing this is not hard, for example, you could load all the images in separate img tags, and set all but one of their display attributes to 'none'.
Then when somebody clicks, you can hide the visible one and show the next one.
Or you can go a little bit deeper and look at the many many different options for image galleries with a google search. Most of them will require some underlying framework be loaded, such at jQuery, but once you get past that hurdle the slide show stuff is usually pretty easy.