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";
}
}
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 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've been asked to implement a Day/Night mode in the page I'm maintaining.
The idea is that the default theme is a light coloured theme with light background and darker fonts and pressing a button swithing to night mode and back.
In a hand made site this looks easier by only switching between 2 .css files or overwritting colours with another one when required, at least that's how I think I would do it.
But in wordpress I don't know what would be the best way to achieve this.
I looked for a plugin that does this and inverts my styles colours in some way to create a dark mode but could not find anything like this.
As I see I will have to do it myself manually, what would be the better logical way of achieving this?
Just asking about the procedure and what files should I modify or touch.
Should I create another style.css and change it? Would it affect only the user that is performing the change on his/her browser and not globally?
Append a night-mode class to your body element when "night-mode" is engaged (script.js).
$('#night-toggle').click(function(e) {
e.preventDefault();
$('body').addClass('night-mode');
});
Then add some CSS (style.css):
body.night-mode #somediv {
//night mode styles go here
}
body.night-mode #someotherdiv {
//night mode styles go here
}
body.night-mode #someotherdiv a {
//night mode styles go here
}
// etc etc etc for each style you need to change
Now, this is a very poor implementation (and not very descriptive) because you haven't really provided any examples of the code you're working with, so I have to assume you have very limited access to altering code for your site/theme.
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
A client just asked for a book-reading website with the following settings:
Must have a nav-bar with a menu and a background-music on/off button.
The menu are links to different content.
The content must change as users desire.
Here comes the tricky part:
If the background music it's ON, then the audio must play along even if the content changes (the only way I know to change the content is refreshing the URL but this also cuts the audio)
Is there a way to achieve this effect? with JavaScript or Jquery?
I really appreciate your help. If you post a simple JSFiddle I would be very pleased.
You will need to make a Single Page Application (SPA). This means you will have one .html file and use AJAX to load the contents of different pages into that file instead of having multiple .html files and reloading the browser. If you reload, the Audio WILL stop.
Here's what you need to do:
Learn the HTML5 Audio API. In other words, learn var audio = new Audio(src), audio.play(), audio.pause(), etc.
Learn how to make AJAX calls (a framework can help you make the AJAX calls. Easiest choice is jQuery)
Here's a demo app on Plunker: https://plnkr.co/edit/1Z1bdXXLcLn2h4TfkOQA?p=preview
Press the play button and change pages. Notice how the music continues to play while the pages changes.
Also, your server will need to be configured to send you the contents of the pages via AJAX so you can avoid having separate .html files for different pages and refreshing.
This is what Soundcloud uses for continuous playback. They use backbone.js, but any decent framework will do.
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();
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.