I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.
Related
I have an imported css template written on bootstrap, and want to use it inside Angular app.
Seems like exactly custom html attributes don't react a loading from router.
Application characteristics. This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping.
Problem. Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example
data-background="assets/images/slider_1.jpg"
to
img src="assets/images/slider_1.jpg"
, it will be loaded and shown from the first time.
Example of map plugin. Doesnt show nothing.
<div class="maps-container map-widget m-b-25">
<div class="map" data-addresses="[4.4, -4.4]"
data-icon="assets/images/map-marker.png"
data-zoom="16" data-street-view="1">
</div>
</div>
Example of slider plugin. No background image.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>This is title</h1>
</div>
</div>
</section>
Example of grid item for blog. Here, it should follow masonry style, but renders like strict grid.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">
You better use [attr.data]="name-of-custom-attr"
This way angular manages the use of custom html attributes correctly.
I am working on a website using Meteor. On one of the pages, I would like some of the images and divs at the top to be animated onto the page.
I have achieved this by adding:
Template.home.rendered=function(){
$('.animateblock').addClass('animated');
};
The added class changes some of the css properties, giving me the desired effect.
The problem I am having is that if I go to a different page of the site and then revisit the page with the animations, it doesn't reset. The class is only ever added once, and I haven't been able to figure out a way to have it removed when another page is visited.
My html code is as follows:
<div class="textAnimate animateblock">
<img src="/home/100.png" class="animateblock percent100" alt="100%">
<img src="/home/antibiotics.png" class="animateblock antibiotic" alt="Antibiotic Free">
<img src="/home/natural.png" class="animateblock natural" alt="All Natural">
<div class="horomoneAnimateContainer">
<div class="animateblock horomoneAnimate">
<img src="/home/horomone.png" class="horomone" alt="Horomone Free">
</div>
</div>
</div>
<div class="stampAnimate animateblock">
<img src="/home/tasty-stamp.png" class="tasty" alt="Tasty Certified">
</div>
I have tried a few different methods, such as adding a removeClass before the addClass, hoping that would fix it, but it did not.
Template.home.rendered=function(){
$('.animateblock').removeClass('animated');
$('.animateblock').addClass('animated');
};
I also tried creating a Template.destroyed section like so, but that didn't work either:
Template.home.destroyed=function(){
$('.animateblock').removeClass('animated');
};
I am using Meteor 1.2.0.1 and am also using iron router, but haven't been able to find a solution to add and remove classes with it. Any suggestions are appreciated!
I do something like this to call in jQuery on template loads:
Template.Messages.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('messageDB', function() {
$('.loader').delay(300).fadeOut('slow', function() {
$('.transition-wrapper').delay(200).fadeIn('slow');
});
});
});
});
Meteor Chef has a great resource on loading patterns here.
I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
I am working on a Native mobile application CMS system using client-side technology(javascript via JQuery for the most part) and have implmented a templating system similar to that of ASP.NET.
So suppose I have a navigation control which has a starttemplate, endtemplate and itemtemplate as follows:
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate">
<ul id="Menu">
</div>
<div data-type="itemtemplate">
<li>[[Text]]</li>
</div>
<div data-type="endtemplate" >
</ul>
</div>
</div>
My problem is the browser as it laods seems to decide to want to fix the html so that the tags are closed "properly" as follows:
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate">
<ul id="Menu">
</ul>
</div>
<div data-type="itemtemplate">
<li>[[Text]]</li>
</div>
<div data-type="endtemplate" >
</div>
</div>
I've tried some workaround and quick hacks to no avail..
I have tried replacing the "<" ">" with certain characters and then replacing them after load but the problem still occurs.
Your code is not valid html. You can't interleave tags (open it in one place and close it in a completely different place). Tags have to be properly nested.
Valid:
<p>
<ul>
</ul>
</p>
Invalid:
<p>
<ul>
</p>
</ul>
Note that you can't properly indent the second one without it looking "off". Please make sure your html is correct first, then the browser will behave properly.
-update- since you want client-side templating, what you don't want is the (invalid) html to be parsed as html. However, it's obviously also not valid xml, which is what you might want.
What you could do is wrap the content of the secions as CDATA.
<div data-type="navigation" id="navigationControlDemo">
<div data-type="starttemplate"><![CDATA[
<ul id="Menu">
]]></div>
<div data-type="itemtemplate"><![CDATA[
<li>[[Text]]</li>
]]></div>
<div data-type="endtemplate" ><![CDATA[
</ul>
]]></div>
</div>
Now if you would interpret that as xml, the parts within the templates are considered text rather than markup.
Basically, you're asking for a way to force a browser to display malformed, messy tag-soup. Thank God most browsers don't just blindly render that kind of code, because the results would be unbearable and make your page unintelligible all together.
That said, if you view the raw page source, you'll probably see the un-corrected, raw markup. But because the browser can't really render it, the engine steps up to the plate and does its best.
But please, don't waste your time finding a way around this, it's just a feature to help you, not to annoy you. Also: HTML5 has a lot more rules about what is allowed and what is not, and how the browser is expected to deal with invalid markup (in your code: <div><ul></div> is deemed invalid, for example). If you feel up to it, you can look at the W3C specifications for more info on the subject.
You can't have <div> elements as children of a <ul> element.
<ul>s only accept <li> tags as children. Specification
Also, it appears you're nesting the tags incorrectly, here:
<div data-type="starttemplate">
<ul id="Menu">
</div>
You can't close that <div> if the <ul> is still open. That's why the <ul> is prematurely closed.
Instead of having tags such as I used keywords to represent the < and > and then render all the correct html using the templating system and replace those keywords back to , and > and add it to the document afterwards. Annoying syntax in my template tags, but it works the way I need it to.
I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.
There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom
The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.