Is it possible to insert -- dynamically generated -- content with CSS into the same website a second time, let's say a div-container like this: <div id="duplicate-me">dynamically generated content</div>
CSS is used to style content that exists or will eventually exist on a page. It can't load or insert dynamic content to a page. It can control showing/hiding content on a page, but the content needs to be placed there first (with the exception of psuedo-classes, but that's not really "dynamic"). As others have mentioned, Javascript/jQuery is what you are needing to use to achieve what you are wanting.
Using pseudo element's in CSS we can kind of create an element and style it in CSS. But then this has it's own limitations.
Javascript is what will essentially help you achieve this using document.createElement() method and other methods line appendChild() etc
CSS cannot be used for duplicating, but you can use javascript to duplicate div,p or any other element. We do it like
In the html file
<head>
<!--all other stuff-->
<script src='sketch.js'></script>
</head>
in the sketch.js file
var dupElem = document.createElement('div');
dupElem.id = "duplicate-me";
document.body.appendChild(dupElem);
//to manipulate the text content we do
dupElem.textContent = "some lorem ipsum"
//or else you can do a for loop
for (let i = 0;i < 3;i++){
document.body.appendChild(dupElem);
}
It is possible to make a copy of a node element but you need Javascript to do that.
<div class="duplicate-me">dynamically generated content</div>
In your Javascript:
let nodeToClone = document.getElementsByClassName("duplicate-me")[0];
let newClone = nodeToClone.cloneNode(true);
document.body.appendChild(newClone);
Please note that id needs to be unique in the document. That is why I used class.
Here you can learn more about clone.
O.K., JavaScript then. I'll look into it. Thank you for the answers. :-)
Related
Is there any way to select elements with same attribute value which I don't exactly have access to? I imagine doing it in way like this:
.first[attribute=.second[attribute]]
I want to use ONLY pure CSS.
no, there is no way to achieve this using css
however, if you need to do something like this you should consider changing your markup (ex. using additional classes) - css is not a programming language
CSS cannot do that. For comparing two elements you need to have access to DOM.
We cannot achieve this through css but this can be done by JavaScript:
window.onload=function(){
var attr = 'elementValue',
elements=document.querySelectorAll('.first, .second');
console.log(
elements[0].getAttribute(attr) ===
elements[1].getAttribute(attr)
);
}
<div class="first" elementValue="1">hello</div>
<div class="second" elementValue="1">hello</div>
Hope this helps
super css noob here.
I'm using a wordpress plugin called visual composer which allows you to name a Row (it's like a block element) with a Row ID or a Class name. I'm trying to have it so when a user hovers over this row and when they click it, this clicking will simply take them to another page within my website.
It allows for an area to have the css for this class or ID that I can associate with the tag, but after searching I'm either searching the wrong thing or can't find it but I am looking for the css that would allow me to do this!
You can't only use css to link to other page, you need javascript. For example the class name is linkPage:
document.getElementsByClassName('linkPage')[0].onclick = function(){
location.href= 'some url...'
}
<div class="linkPage">linkPage</div>
You'd need to inject a bit of JS into the theme that listens on window for a click with the desired ID or class, then call window.location.href = URL or something of that nature.
CSS doesn't have the power to cause browser location changes.
CSS
CSS (Cascading Style Sheet), as its name states, defines a set of rules and properties for an HTML page you wish to style (stuff like colors, size, asf); and user interaction (even as minor as pointing to an URL) are not part of its scope.
Basic
Talking about a giant like WordPress and a strong plugin such as Visual Composer, extremely old and standard features like link/image/table asf are always to be found. You may have a look at visual composer's "Raw HTML" feature (https://vc.wpbakery.com/features/content-elements/) in combination with a regular "a" tag (http://www.w3schools.com/tags/tag_a.asp).
Editable
Asking how page linking can be achieved through editing of a CSS file, then you might as well look into different editable content types of the plugin - such as HTML or JS.
Click on table row
Best approach to have table cells/rows clickable would be by the use of JavaScript; see Adding an onclick event to a table row
Link using jQuery and Javascript (easier method):
$(".link").click(function(){
window.location.replace('https://www.example.com');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Link using pure Javascript (harder method):
x = document.querySelectorAll('.link').length;
y = 1;
while (x => y) {
document.getElementsByClassName("link")[y].onclick = function() {
window.location.replace("https://www.example.com");
};
y++;
}
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
I'm using html5, JQuery Mobile and KnockoutJS, I Have a foreach template that renders a grid like GUI from an observable array.
However, when I add items to the bound array, the styles are not applied to any new items.
They appear unstyled, most of the times.
some times they appear with style, but once the styling fails, it stays broken for as long as I run my app.
Does anyone have any idea how to resolve this problem?
Snippet:
<div id="timeEntryList" data-bind="foreach: timeEntries">
<div data-role="header" data-theme="c">
<h1>some header</h1>
The odd thing is that it works sometimes.
Hard to guess without any code. But I guess you 're saying jqm doesn't render properly after dynamically adding elements. That's right it doesn't. I guess it's like the list. And you probably can do something like $('#mylist').listview('refresh'); but I don't know what sort of component you're talking about.
you can find more info in the documentation
jQM might not support more than one data-role="header" section. I would try conforming to their standard page layout with one header, one content and one footer section and see if that helps.
I've found that if I update my KO observables in pagebeforeshow I don't have to use .listview('refresh')
Can I define a class name on paragraph using Markdown? If so, how?
Dupe: How do I set an HTML class attribute in Markdown?
Natively? No. But...
No, Markdown's syntax can't. You can set ID values with Markdown Extra through.
You can use regular HTML if you like, and add the attribute markdown="1" to continue markdown-conversion within the HTML element. This requires Markdown Extra though.
<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>
Possible Solution: (Untested and intended for <blockquote>)
I found the following online:
Function
function _DoBlockQuotes_callback($matches) {
...cut...
//add id and class details...
$id = $class = '';
if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
foreach ($matches[1] as $match) {
if($match[0]=='#') $type = 'id';
else $type = 'class';
${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
}
foreach ($matches[0] as $match) {
$bq = str_replace($match,'',$bq);
}
}
return _HashBlock(
"<blockquote{$id}{$class}>\n$bq\n</blockquote>"
) . "\n\n";
}
Markdown
>{.className}{#id}This is the blockquote
Result
<blockquote id="id" class="className">
<p>This is the blockquote</p>
</blockquote>
Raw HTML is actually perfectly valid in markdown. For instance:
Normal *markdown* paragraph.
<p class="myclass">This paragraph has a class "myclass"</p>
Just make sure the HTML is not inside a code block.
If your environment is JavaScript, use markdown-it along with the plugin markdown-it-attrs:
const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);
const src = 'paragraph {.className #id and=attributes}';
// render
let res = md.render(src);
console.log(res);
Output
<p class="className" id="id" and="attributes">paragraph</p>
jsfiddle
Note: Be aware of the security aspect when allowing attributes in your markdown!
Disclaimer, I'm the author of markdown-it-attrs.
If your flavour of markdown is kramdown, then you can set css class like this:
{:.nameofclass}
paragraph is here
Then in you css file, you set the css like this:
.nameofclass{
color: #000;
}
Markdown should have this capability, but it doesn't. Instead, you're stuck with language-specific Markdown supersets:
PHP: Markdown Extra
Ruby: Kramdown, Maruku
But if you need to abide by true Markdown syntax, you're stuck with inserting raw HTML, which is less ideal.
Here is a working example for kramdown following #Yarin's answer.
A simple paragraph with a class attribute.
{:.yourClass}
Reference: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists
As mentioned above markdown itself leaves you hanging on this. However, depending on the implementation there are some workarounds:
At least one version of MD considers <div> to be a block level tag but <DIV> is just text. All broswers however are case insensitive. This allows you to keep the syntax simplicity of MD, at the cost of adding div container tags.
So the following is a workaround:
<DIV class=foo>
Paragraphs here inherit class foo from above.
</div>
The downside of this is that the output code has <p> tags wrapping the <div> lines (both of them, the first because it's not and the second because it doesn't match. No browser fusses about this that I've found, but the code won't validate. MD tends to put in spare <p> tags anyway.
Several versions of markdown implement the convention <tag markdown="1"> in which case MD will do the normal processing inside the tag. The above example becomes:
<div markdown="1" class=foo>
Paragraphs here inherit class foo from above.
</div>
The current version of Fletcher's MultiMarkdown allows attributes to follow the link if using referenced links.
In slim markdown use this:
markdown:
{:.cool-heading}
#Some Title
Translates to:
<h1 class="cool-heading">Some Title</h1>
It should also be mentioned that <span> tags allow inside them -- block-level items negate MD natively inside them unless you configure them not to do so, but in-line styles natively allow MD within them. As such, I often do something akin to...
This is a superfluous paragraph thing.
<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>
And thus with that I conclude.
I am not 100% sure if this is universal but seems to be the case in all MD editors I've used.
If you just need a selector for Javascript purposes (like I did), you might just want to use a href attribute instead of a class or id:
Just do this:
Link
Markdown will not ignore or remove the href attribute like it does with classes and ids.
So in your Javascript or jQuery you can then do:
$('a[href$="foo"]').click(function(event) {
... do your thing ...
event.preventDefault();
});
At least this works in my version of Markdown...