I have many flow charts and clicking on each block of a flow chart must open a question. Basically the question page has the same template with just a change in the heading. Now I think it would be absurd to create a html file for each question since the template is going to remain exactly the same. Once the user clicks on a block of the flow chart, is there a way to change the heading of the question page and then load it?
I want to use jquery to do it and I am just a beginner in jquery. I know how to change texts by appending/replacing elements once the page has been displayed or loaded.
You could replace it each time on the fly:
var template = "{header}<p>Some text</p>";
$('#output').append(template.replace('{header}', 'Some header'));
$('#output').append(template.replace('{header}', 'New header'));
You can try it here: http://jsfiddle.net/ykmtF/
Related
I am using highlight.js for syntax highlighting in a webpage.
When I change the content by setting the relevant innerHTML using JavaScript, the content output on the page updates as expected. However the changed content is not highlighted in the browser.
What is the correct way to deal with this situation, generally or with highlight.js using only JavaScript, HTML and CSS?
I found a solution thanks to #Afsar's insightful comment.
The function initHighlighting from highlight.js:
initHighlighting()
Applies highlighting to all <pre><code>...</code></pre> blocks on a page.
... contains an internal check to see whether it has already been run. Since I was attempting to run it more than once, highlighting was not working correctly.
So one possible solution to updating highlighting after updating content via JavaScript with no page reload is:
var element = document.querySelector(".class_that_contains_code_blocks");
var blocks = element.querySelectorAll('pre code');
blocks.forEach(hljs.highlightBlock);
I'm sorry for asking a simple question as I'm still learning html/css/js. What I want to do is to be able to click on this button that is a div class made from css and js, to load it's content without refreshing the page, which I believe requires ajax or jquery, but not sure how. Here is my github page danielroberto.github.io and the repo https://github.com/danielroberto/danielroberto.github.io so you can get an idea of what I mean. I basically want to click on any of the navigation buttons and then loads whatever content I want without redirecting to whole new html page. For example, when I want to click on the "photography" button, I want the button effect to happen while my images load on the bottom without redirecting to something like photography.html. Similar to clicking on the "design" button, I want it to transition and load my content.
There is a wealth of resources on the net to get the intro you need to AJAX - the technique of loading parts of a webpage instead of the whole thing.
You correctly suggest that you could use the jQuery JavaScript library to do this - there are lots of alternatives, but that's easy to learn, and is widely used on the net. Tried and tested!
Start here: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
That would only be if you are planning to use some server-side technology to serve up your images.
If you are just going to manually set a list of images to show, and you want the buttons to cycle through these, then you're probably best just to build a carousel of some kind, using a jQuery carousel plugin, and include it all in your HTML markup from the beginning. Loads to choose from or get inspired by here: https://plugins.jquery.com/tag/carousel/.
Also, you should size your images to fit the screen you are serving them to. I recommend you look at using srcset. Your image on the test site was 4600px wide! Check this out: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I hope it goes well. The early days can be hard work but you'll soon get the hang of it.
You could store your content in a var in your js. Then when your button is clicked you can call the function which creates a text node or an element and append that to your div.
HTML
<button onClick="function()"></button>
<div id="show-data">
</div>
JS
var newText = 'Stuff here';
function function() {
var div;
div = document.getElementById('show-data');
div.appendChild(document.createTextNode(newText));
}
You can easily edit the html of an element when clicking a button using jQuery
HTML
<div class="my-button">click here</div>
<div class="my-content">init content</div>
JS
contentElement = $('.my-content');
$('.my-button').click(function() {
contentElement.html('new content');
});
https://jsfiddle.net/jaxon58/zp9mvu38/
I've been quite frustrated since I have been looking on google for an answer to my problem and nothing pops up, I am using dynamic data to create some forms on a asp.net website however on one field I want to be able to include a hyperlink to another page, is this possible ? if so any help would be greatly appreciated, thanks
Code
[ScaffoldColumn(true)]
[Display( Name = "1. Help Page Document", Order = 1)]
[ChoiceComment("No", "Yes")]
[ChoiceDisplayValues("No", "Yes")]
[ChoiceValues("2", "1")]
[RadioListOrientation(RadioListOrientation.EnumOrientation.Horizontal)]
[UIHint("RadioButtonList")]
so I want the text 'Help Page Document' to be a url like an anchor tag, is this possible? via javascript, c#, etc... thanks again.
There are many ways to achieve this.
One way is to change the field template that you currently use the this field or you can create a new one like EmailAddress.ascx below.
For an example, in your project, look at the content of : /DynamicData/FieldTemplates/ForeignKey.ascx
See also : https://goo.gl/7HZ4c6
To use this example, you will need to put the following annotation in your meta data :
[FilterUIHint("EmailAddress")]
I have a Javascript greeting that greets new users with a drop down banner like SO has. It only becomes visible after 3 seconds and when the X is clicked it disappears. Since I have not put meta description tags, on every page Google shows that greeting as the meta data. I dont understand why Google is using this seeing as it is not loaded staight away, will this stop happening if i use meta description?
Should I use Meta desciption? On the upside it might help this problem, but then Google wont be able to dynamically fetch data from the site (which happens to be a forum). It so happens that it is doing this anyway and I dont know why?
Thanks!
My best guess is the text from your greeting is being added to the page (a wordpress plugin?) on the server side as visible (so it appears even if javascript is disabled), hidden by javascript on pageload, then just being shown after 3 seconds (i.e. it is really there already and as such is the first major text google finds).
Try changing your greeting plugin/code to generate the div containing the greeting message after page-load, or at least to append it to the end of the document (or apply style="display:none;" as an inline-style so Google can see it) on the server-side then tweak the js to show it. It would no longer greet visitors with js disabled, but would also allow google to reach your main content without encountering the greeting.
It does this because it's the first readable bit of text found when parsing the DOM. I'm not sure if there is a delay google uses before it saves the page state to its cache but that shouldn't matter. I actually use this 'feature' of google to allow me to manipulate what the site listing says in the search listings. If you want it not to show up just move the code for the message to the bottom of your <body>s node list (i.e. put it just before you close the </body>).
display:none won't do anything it has to be moved so that it's not in the first few readable lines of text when the DOM node tree is parsed.
im making a program that generates rgb, hsl, and hex# colors in 6 swatches, the other 5 swatches being complementary light and darker colors. I need to have a button that when pushed inserts another html file (something very basic that has some styling) and then another button that when pushed styles the example html file previously inserted with the colors the user inputed.
a simple way to put it is basically to show the user how the colors generated would look on an example website page. So on the new html file, the new colors generated would display for the user to see. Like the font color would change, toolbars, calendar, anything like that.
How would I go about doing this? my code generates the colors, and I inserted an so I can see my sample website, I just dont know how to style the css of the example html code. any suggestions would work perfect! I dont know how to attach files on this website but if you need me to email you all my code I can do that. just let me know thank you!
Like Derek said, iframes are used for inserting pages or parts of pages into other pages, but I'd say it'd make more sense for you to use a div rather than an entire new HTML page.
An inline frame is used to embed another document within the current
HTML document.
http://www.w3.org/community/webed/wiki/HTML/Elements/iframe
http://www.w3.org/TR/html4/present/frames.html#h-16.5
http://www.w3schools.com/tags/tag_iframe.asp