I have some elements that i hide using css display: none; functions, and most ones i hide using javascript, but when ever a user stripes or disables his browser css and javascript everything i hide will become visible on the front end, though the site may be looking scattered rhen but those hidden elements will still show as html files..
Any idea on how to hide such elements so that if javascript and css are disabled in the viewers browser the hidden elements won't still show.
I was thinking php can be used since there is no way to strip it off.
Maybe you could try this:
<?php
$flag=false;
if($flag){
?>
HTML code here, flag is true
<?php
}
else{
?>
HTML code here, flag is false
<?php
}
?>
This is not an efficient way to do it, but maybe it can help you.
Anything that is rendered to the DOM might be found even if you have other means beside CSS/JS to hide it (you may simply analyse the entire server's response).
Therefore you may want to prevent entirely the HTML code that should not be shown to be sent through backend logic. An example:
<? $cond=false; if($cond): ?>
<p>I'm shown on <i>$cond === true</i></p>
<? else: ?>
<p>I'm shown when <i>$cond === false</i></p>
<? endif ?>
<p>I'm always shown</p>
<p style="display:<?= $cond ? 'none' : 'block' ?>">
I'm always rendered but hidden/shown through CSS and $cond value
</p>
You can modify it here:
https://3v4l.org/pimd5 (press the eye button at the right to check the rendered HTML).
Related
I used add_theme_option('custom-background') in my wordpress functions.php file. And it is working but when i set background image i have not got the image. In the page style it is showing [site_url] in the url. But i need to show localhost/wordpress instead of [site_url].The style line is given below:
background-image: url("http://[site_url]/wp-content/uploads/2019/02/pexels-photo-958168.jpeg");
I got an alternative solutions. The problem is with the theme. Other theme is working correctly. For this theme i did this:
<body <?php body_class();?> style="background-image: url('<?php echo substr(get_background_image(),11);?>')">
Now it is returning- "wp-content/uploads/2019/02/bg.jpeg". And i will get background image dynamically.
You probably mean add_theme_support(), not add_theme_option().
Don't know why it's happening, but a workaround would be to tweak #Emma's suggestion a bit. Something like
<?php $url = parse_url(get_background_image(), PHP_URL_PATH); ?>
<div
class="myClass"
style="background-image: url(<?php echo $url?>)">
</div>
(Probably also need to test if the initial image URL is empty or not.)
(And of course this assumes the WordPress install is at the site root. Some further changes might be needed otherwise, and it might end being more like Emma's. I might also add that you could instead use jquery on the client side the fix the problematic URL.)
How can I achieve changing backgrounds in Yii2? I am new to Yii2.
Here is something similar: codepen.io
Do I need to do it via CSS or should i do it via any Extensions ?
In view file make html structure like in your link, next you need to load css and js code. You can do it in few ways, but most simple is add it in the same view file like below:
<?php $cssContent = 'put css content here';
$this->registerCss($cssContent);
$jsContent = 'put your javascript content here';
$this->registerJs($jsContent);
?>
<div id="change-bg-image"></div>
<div id="change-bg-color">
</div>
You can do it via javascript, just change wrapper or document.body style.
The variable is for example there:
document.body.style.backgroundImage
Happy coding.
(you can declare array of links to images and do setInterval, also you can despite of document.body use for example document.getElementById("background") )
I've added a set of border stylings to my media attachment page using Advanced Custom Fields. What I want is to be able to select one of these options and add the relevant style as a class to the attached image.
For example: a blogger can create a post and mix and match different stylings to the images without knowing any CSS or HTML. I've attached a screenshot of the attachment page.
I've been investigating this and it seems like it has to do with attachment_fields_to_edit or attachment_fields_to_save filters, but I can't put it all together.
http://imgur.com/XW42bLo
So ideally, if I were to select the Green Border option the image in the post would have a "green-border" class.
Apologies if I'm misunderstanding the question, but could you not just do:
<?php
$style = get_field('border_options');
?>
<div class="<?php echo $style . '-border'; ?>">
Content
</div>
?
I'm new here, this is my fist question, but I've performed research and can't find the answer.
I'm developing a Wordpress site and hacking a template that uses masonry with summaries and thumbnails on a grid on the index page. When you click on an image you're directed to the post content. This is the theme: http://jinsonathemes.com/fabs/?themedemo=Vasiliki
What I'd like to implement is this:
When the user clicks on the thumbnail, the content is revealed and expanded on the same page. Here's an example from Up Magazine: http://upmagazine-tap.com
I looked at the JQuery script on this very cool Fiddle (#FS34t). The boxes expand and collapse content on click, but that's not quite what I have in mind for this site. Will definitely implement on another.
I thought it would be an easy show /hide function, but each image is linked to a specific post using the same "content" div. How would I use an image in a masonry grid as the trigger for an expand/collapse of content of the respective post -- as in the Up Magazine sample?
Thank you for reading.
I would add the_content to the post div in its own child div. Then hide that div in the css.
Then I would create a function that opens up that div [I'd use jQuery slideDown()]. The function would also include the masonry reload method [.masonry( 'reload' )] in that function.
I would then bind that function to a click on the div, or perhaps the post thumbnail.
Very roughly:
html
<div class="post">
<?php the_post_thumbnail() ?>
<div class="excerpt"><?php the_excerpt() ?></div>
<div class="post-content"><?php the_content() ?></div>
</div>
the css
div.post-content {
display: none;
}
js
$('.classofpostthumbnail').click(function() {
$(this).siblings('.excerpt').slideUp();
$(this).siblings('.post-content').slideDown();
$('.masonrycontainer').masonry('reload');
});
However my js could definitely be improved. [For starters chain the slides with their callbacks so that all the animations run after each other. And of course your html and css will probably be a lot more complicated.
Well ... UpMagazine does not have hidden content on div's we load content into the container with AJAX sending requests to /wp-admin/admin-ajax.php (see: http://core.trac.wordpress.org/browser/trunk/wp-admin/admin-ajax.php ).
Glad you liked the website.
Hey I have a wordpress blog, and I need to add some negative margin on the sidebar on the index page, but not on any other page, the trouble is since the sidebar is in "sidebar.php" and the head element is in "header.php" so I can't use inline styles or styles just for that page.
Any ways of achieving this?
I would assume a PHP if statement in the header?
For the moment I've used a style element within the body.
I haven't used wordpress in some time, but from what I remember, there was a specific home/index template... You could wrap the sidebar in a tag and sub-reference that through css.
css:
#sidebar-fix #sidebar element {...}
html:
<div id="sidebar-fix"><?#sidebar include?></div>
You can use the is_page function to single out the page you want. Here is an example and a link.
<?php if (is_page('My Page')) { ?>
<style type="text/css">Your style here</style>
<?php } ?>
http://codex.wordpress.org/Function_Reference/is_page