How can I check if a div with certain class x exists on page?
{% if page.div.class == x %}
<script></script>
{% endif %}
Would this work?
With JavaScript and document.querySelector(), you can select the first element within the document that matches your specified selector.
For example:
const targetElement = document.querySelector('.x') // .x is class you are looking for
if (targetElement) console.log('element with class of x exists')
If an element exists on your page it will return that element, otherwise null is being returned.
Checkout MDN doc
Related
There's an img element being created somehow on this page that I can't figure out how to target. It's generated by a script I don't have access to so I can't just delete it.
There are no ID or class attributed to it so I can't apply CSS (that I know of). The source link also changes for other article pages so I can't reference the URL either.
Is there anyway I can target or just hide it? It's creating extra white space at the bottom of the page.
http://support.spacejump.co.nz/support/solutions/articles/27000068245-payment-methods
There are two ways depending upon the possibilities on your website.
1: I suppose there will be no img tag directly inside the body tag if you code properly and put it inside a div or any other tag. So, for this solution is:
body > img {display: none;}
2: If first is not the case and the image will always come after the script tag. Then this also is the solution:
body > script + img {display: none;}
BTW, both are working in your situation.
Right click on the page and view source. You can see the element present int the page source. Delete it in the source code in line 551.
If the image src attribute is guaranteed to be consistent over time, then you can target it by that attribute, and remove it.
document
.querySelector('img[src="/support/solutions/articles/27000068245-payment-methods/hit"]')
.remove()
Here is a JS solution to target the last class in the page before all those JS src CDNs... As it seems the IMG tag is after a bunch of JS tags with the very last element in your page being the layout class, so we create a helper function that gets the siblings of the target element, then we loop over the array returned by the function and set an index, then check the tag.tagName === 'IMG' and check our iterated index => i is higher than the set index, if we get a match, remove that element from the DOM.
const removeImg = document.querySelector('.layout')
const body = document.body
function getAllSiblings(element, parent) {
const children = [...parent.children];
return children.filter(child => child !== element);
}
function removeImageAfterElement(el) {
let index = 0;
getAllSiblings(removeImg, body).forEach((tag, i) => {
tag.classList.contains(el) ? index = i : null
tag.tagName === "IMG" && i > index ? tag.remove() : null
})
}
removeImageAfterElement(removeImg)
<body>
<div class="another-class"></div>
<div class="layout layout--anonymous">
some text and page content
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/package#version/file"></script>
<script src="https://unpkg.com/#freshworks/freshdesk/dist/freshdesk.js"></script>
<script></script>
<script type="text/javascript"></script>
<img src="/support/solutions/articles/27.............../hit">
</body>
I am trying to add a CSS class to the whole form_row in a twig template from Symfony 4! As you can see from the image, my code right now only adds the class to the input tag, put I need the class to be added to the parent div container.
Below is my code:
{{ form_row(form.firstname, { 'attr' : {'class' : 'first_name'} }) }}
below is an image of the rendered code:
From the documentation of symfony:
attr: A key-value array that will be rendered as HTML attributes on the field.
This means the attributes only get applied to the field.
You could instead wrap the whole div in another div like so:
<div class='first-name'>
{{ form_row(form.firstname) }}
</div>
And then apply the style either to div.first-name or div.first-name > div
Alternatively: Render the whole row yourself
With the following you can render the label and widget yourself:
<div class='first-name'>
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
The given script creates an action button and a slider in r shiny. If I wish to give certain attributes to {{ button }} in html script like position, margin from left, height and width, please help me with this.
<!-- template.html -->
<html>
<head>
{{ headContent() }}
</head>
<body>
<div>
{{ button }}
{{ slider }}
</div>
</body>
</html>
## ui.R ##
htmlTemplate("template.html",
button = actionButton("action", "Action"),
slider = sliderInput("x", "X", 1, 100, 50)
)
reproducible example, note that action button can be styled directly by using #action selector however slider input has container therefore positioning of the slider as such should be done at container level and cannot be done by selecting id. As far as i know css selector doesnt have equivalent of jquery :has()
library(shiny)
shinyApp(
ui <- fluidPage(
fluidRow(actionButton("action", "Action"),sliderInput("x", "X", 1, 100, 50)),
tags$head(
tags$style('#action { margin:3px;border:2px solid green;padding 20px;}
.slider-custom-format { margin:3px;border:1px solid red;}
.slider-custom-format .irs-bar,.slider-custom-format .irs-bar-edge{background:red;}'),
tags$script('$(function(){
$(".form-group.shiny-input-container:has(#x)").addClass("slider-custom-format")
})')
)
),
server <- function(input, output) {})
I have got two pages. The first one, parent.jade, which contains:
div.header
block header
And the second one, child.jade, contains:
extends main
block prepend header
So, how I can to add a class for header block in my child.jade? I need to have other class naming at the different pages.
Yes, but you must pass a object to jade to be that which is rendering. I.e.
In nodejs
jade.renderFile('child.jade', {
"myIds" : 'FristPage',
"myClass" : [ 'this', 'is', 'cool' ],
})
In your parent.jade
div.warpper( id=myIds, class=myClass )
block content
When render show
<div class="warpper this is cool" id="FristPage">
The block form child.jade
</div>
But it can not do directly from jade or from files jade.
I have a jade template
extends _base
block content
include ./partials/_main-header
.Template2RightBig
.container
.row
block content2RightBig
.col-md-3.Template2RightBig--left.column
block left-column
.col-md-9.Template2RightBig--right.column
.Template2RightBig--right-header
block right-column-header
.Template2RightBig--right-annotation
block right-column-annotation
block right-column
include ./partials/_footer
I want to show or hide right-column-annotation block WITH its parent container(.Template2RightBig--right-annotation) in pages, which will extend this page.
How can I do that with Jade power?
You can pass a variable from your child page into this template through a new block in order to conditionally control anything in this template.
_your-template.jade
extends _base
block content
include ./partials/_main-header
.Template2RightBig
.container
.row
block content2RightBig
block page-variables
.col-md-3.Template2RightBig--left.column
block left-column
.col-md-9.Template2RightBig--right.column
.Template2RightBig--right-header
block right-column-header
if rightAnnotationVisible === true
.Template2RightBig--right-annotation
block right-column-annotation
block right-column
include ./partials/_footer
_your-page.jade
extends _your-template
block page-variables
- var rightAnnotationVisible = true
//- annotation and parent wrapper will render
_your-other-page.jade
extends _your-template
block page-variables
- var rightAnnotationVisible = false
//- annotation and parent wrapper won't render
Just be sure the new block is scoped to be included in the right place in the parent blocks.