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 Couldn't find anything on this so maybe you guys could give me some clues if this is possible using JavaScript or not.
Like the question asks, how can I pop an entire block into my html with just using SJ or maybe JQuery?
No not just a div saying Hello and with pretty colors and stuff but an entire block. Meaning a Div with actual content like forms, buttons, spans, links, images and other stuff.
I wanted a temporary popup that wouldn't save data and make the entire project really heavy but instead just appear with some preset values that's called by a JSON script.
Like a temporary form of some sorts.
Everything you are describing is pretty common use of Javascript so it is strange that you did not find anything about it.
There are entire sites written on pure Javascript.
Nevertheless , for a out-of-the-box solution to your inquiry , there is a really good plugin , check it out here : http://trentrichardson.com/Impromptu/.
If you want to learn how to do it yourself , then you should read on the Javascript DOM manipulation functions like :
Node.removeChild()
Node.replaceChild()
Node.insertBefore()
Node.hasChildNodes()
Start from "https://developer.mozilla.org/en/docs/Web/API/Node/appendChild" and go on.
You mean like this http://www.w3schools.com/jsref/met_document_createelement.asp ?
You can add elements to the body of your web page with javascript.
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 2 years ago.
Improve this question
Suppose that I have a blob of HTML, CSS and JS that I wish to repeat on a page. Logically this blob of HTML/CSS/JS is a "control" and I wish to repeat this control on the page. Inside this HTML/CSS/JS blob are some IDs, such as tab1, tab2, and tab3 and the JS refers to tab1, tab2 and tab3 using jQuery.
Now of course this works fine when it is repeated only once. But in order to repeat it more than once and have it not break, I need to change the IDs to something like instance1_tab1, instance2_tab1, instance3_tab1 and so on and also change the Javascript as well.
Now of course I can do this but it feels painful.
So the question is - is there a modern way to simply isolate each of these repeats without using an iFrame?
Right now I am using iFrame to separate them and it is kind of gross so would like to make it better. Any help would be greatly appreciated.
Update: Edited to remove the word "best". It is not very helpful how the moderators are closing the question as "opinion based" when it is clearly not. This question does not have a good answer currently on Stackoverflow and is a valuable addition to SO
I think, you could look into Web Components. In particular Lit Element library. Web Components encapsulates HTML, CSS and JS into single custom element. As example, you can have <tab-group> and <tab-group-tab> HTML elements. You can pass objects as attributes as well.
If you don't want to use any library, it is still possible, but requires bit more boilerplate.
Browser support is pretty good already and many large companies are adopting web components at scale.
There are link to some examples - https://stackblitz.com/edit/open-wc-lit-demos
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I want to remove JavaScript. But it does not work without JavaScript. What is the solution for this, please any modified code?
CSS is used to style the content and JS is the proper way to handle clicks and go some logic. Explain what you mean by damaging the system and I will try to help you fix it.
CSS means casacade style sheets, how do you want to create forms and functions with it? You definitely need js.
In other words, css is for the visuals, javascript to give it functionality. You just can't create methods using css.
CSS is for styling only (colours, font style etc.) as mentioned by others. Adding 'interactivity' by css would be somthing like this
.search-button a:active{background-color:#000;}
Change style on active or hover etc, but thats about it.
Personally I wouldn't say this is interactive. Javascript shouldn't slow down your website as its used by thousands of websites extensively eveyday. If it is then you need to take a look at the javascript code and debug it.
Regards
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'm a web designer and i'm currently designing a website that includes images. I was wonder if anyone can tell me what it is called or if you can guide me the right way so i can do some research on my own and learn it.
Basically what i need to know is how can you lets say if the user click on the image it will bring them to another html with that image plus that image information
A current example... wallhaven.cc if you go there and if you click a wall paper.. every wallpaper has a specific link. is that generated or does that mean that literally EVERY image on that website has a web page of its own?
Yes it is possible to do it both ways you can use what is called dynamically generated web pages or you can create each page manually.
So if you were to go with the dynamically generated web pages you would probably want to consider looking around a JavaScript Template Engine. I currently am using this one while I build my own. http://idangero.us/template7/. That is the best JavaScript Template Engine you can get. Plus it is free and Open-Source. But if you go with creating each page manually you will have a lot of work on you hand! So personally I would choose using the JavaScript Template Engine!
Have a great day.
Joseph Shenton
http://timedevs.net/
There is one page for image details, the number at the end of the link is the image id, which tells the server which data to output.
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
This might be a dumb question, but I'm working a theme for my Tumblr blog and the block where all the data regarding rendering posts is fairly large and just tends to be a pain in the ass to have in the middle of everything. I was wondering if there was any way that I could have this block in a different file and insert it in to my code with just a line or two instead of having this 150 line piece of code in the middle of my document that I'm never going to touch.
I have a feeling that the best way to do this would be with JS but I'd prefer pure HTML if possible.
I'm guessing the block of data you want to move to a separate file is also HTML code? If so, you can do this: Move that block of code into a separate .html file and insert this line into your page:
<object type="text/html" data="yourFile.html" style="height:300px; width:96%; margin:2%;"></object>
The height, width, and margin should be like you actually want it. The values in there at the moment is just an example. The important part is the "data" attribute.
If you don't want the external HTML code to display, you can set the visibility of the object to hide it.
Hope this is what you were looking for.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am looking to build a personal code playground. Basically I am looking to make 3 Code Mirror text areas for HTML, CSS and JS, Basically I am puzzled on how to make a result box. Any help would be appreciated... Thanks :)
Just to clarify I am looking for a way (I am aware of iFrames) to submit code from 3 "CodeMirrors" and then gets applied to a result area below. I am also looking for pointers as to how todo this as I have only been coding 6 months.
Approach 1 - using iframes:
It's the approach used by jsfiddle. Create 3 textareas to put your code (html, javascript, css). When the user press a button, you can send an ajax request to the server, sending the 3 texts, in order to generate a temporary page that is the composition of the various parts and returning its URL. Then create an iframe that points to it (or update the src of an existing one).
It's quite simple.
Approach 2 - client side:
You can append both the html, css and js in the actual page. It's quite simple, but can generate various issues with conflicting styles, ids and javascript functions/variables names (that you must manage manually).