I use Wordpress as a CMS for my website. I'm Using the Sugarland Theme by Thomas Rodus (Which uses WP-Bakery as a page builder), unfortunately my support has run out and I JUST realized that right click-save as/downloading images from my website is disabled/inaccessible. This isn't great as it means any potential clients, agencies, etc, can't quickly save my images and store them for later viewing.
My knowledge is limited but I've managed to do some customizing myself throughout the years of using WP and hosting my website and whatnot. I can usually figure out what's wrong and fix it, but I can't find which element is causing the issue, if it's the PHP files (content-portfolio-ajax , content-portfolio-nav) for the AJAX overlay, or the Jquery files (jquery.fancybox.pack) as I can't see anything obvious suggesting something is disabled.
------ Content-portfolio-ajax:---------
<?php
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
?>
<div id="project-title" class="centered">
<div class="parent">
<div class="child">
<?php
the_title('<h3>', '</h3>');
the_excerpt();
?>
<?php esc_html_e('Details', 'sugarland'); ?>
</div>
</div>
</div>
<div id="project-slider">
<figure class="images">
<?php the_post_thumbnail('full'); ?>
</figure>
<?php if(!empty($next_post)) : ?>
<a class="ajax-prev" href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"></a>
<?php endif; ?>
<?php if(!empty($prev_post)) : ?>
<a class="ajax-next" href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"></a>
<?php endif; ?>
</div>
-------- or content-portfolio-nav: ---------
<?php
global $post;
$url[] = '';
$url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
$displays = get_option('ebor_cpt_display_options');
$slug = ( $displays['portfolio_slug'] ) ? $displays['portfolio_slug'] : $slug = 'portfolio';
?>
<div class="padding-0 clearfix" data-ref="mixitup-container">
<?php if(!empty($prev_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio lifestyle" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $prev_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($prev_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio blank" data-ref="mixitup-target">
<a href="<?php echo esc_url( home_url('/') . $slug ); ?>">
<figure class="images">
<img src="<?php echo EBOR_THEME_DIRECTORY; ?>assets/images/blank.jpg" alt="Blank Image" />
</figure>
<div class="info-box-content">
<div class="parent">
<div class="child">
<h5><i class="fa fa-th"></i> <?php esc_html_e('Overview', 'sugarland'); ?></h5>
</div>
</div>
</div>
</a>
</div>
<?php if(!empty($next_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio travel" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $next_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($next_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
</div>
----Or this JS (jquery.fancybox.pack) (I didn't paste the entire thing because it's large and I'm not sure which bit would be relevant to the problem. ------
(function(C,z,f,r){var q=f(C),n=f(z),b=f.fancybox=function(){b.open.apply(this,arguments)},H=navigator.userAgent.match(/msie/i),w=null,s=z.createTouch!==r,t=function(a){return a&&a.hasOwnProperty&&a instanceof f},p=function(a){return a&&"string"===f.type(a)},F=function(a){return p(a)&&0<a.indexOf("%")},l=function(a,d){var e=parseInt(a,10)||0;d&&F(a)&&(e*=b.getViewport()[d]/100);return Math.ceil(e)},x=function(a,b){return l(a,b)+"px"};f.extend(b,{version:"2.1.4",defaults:{padding:0,margin:10,width:800,
height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!s,fitToView:!0,aspectRatio:!1,topRatio:0.5,leftRatio:0.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},keys:{next:{13:"left",
34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
Sorry, I know this is probably a long shot. And I'm sorry about my obvious cluelessness around this, but I've spent the last few weeks trying to figure out what the problem is. Thank you so much to anyone who looks over this.
There are a number of ways to disable right click, but a common way is
document.addEventListener('contextmenu', event => event.preventDefault());
If you're going to disable the disabling, you'll need to find the reference to contextmenu or onContextMenu or something similar.
The snippets you included didn't have this in it, so it's probably somewhere else in the theme or plugin folder.
Without more code, I can't help much, but good luck trying to find it yourself! Let us know if there's more info you can give.
The script on my site does not work correctly. It works only for the first post. Help please understand. Thank you.
Screnshot
Code to get my post
function render($Post) {
ob_start();
?>
<div class="post-1">
<div <?php //post_class(); ?> id="post-<?= $Post->ID; ?>">
<div class="My-title">
<h3><?= $Post->post_title; ?> </h3>
</div>
<div class="post-2">
<span id="read_more">Reed more</span>
<div id='read'>
<?= apply_filters('the_content', $Post->post_content); ?>
</div>
<span id='hidden'>Turn</span>
</div>
</div>
</div>
<?php return ob_get_clean();
}
My JavaScrip
$(document).ready(function(){
$('#read_more').click(function(){
$('#read').slideDown(200);
$(this).hide();
$('#hidden').show(200);
});
$('#hidden').click(function(){
$('#read').slideUp(200);
$(this).hide();
$('#read_more').show(200);
});
});
You need to use class name instead of id
Please consider using the following code:
PHP:
function render($Post) {
ob_start();
?>
<div class="post-1">
<div>
<div class="My-title">
<h3><?= $Post->post_title; ?> </h3>
</div>
<div class="post-2">
<span class="read_more">Read more</span>
<div class="read">
<?= apply_filters('the_content', $Post->post_content); ?>
</div>
<span class="hidden">Turn</span>
</div>
</div>
</div>
<?php return ob_get_clean();
}
JAVASCRIPT:
$(document).ready(function(){
$('.read_more').click(function(){
$(this).parent().find('.read').slideDown(200);
$(this).hide();
$(this).parent().find('.hidden').show(200);
});
$('.hidden').click(function(){
$(this).parent().find('.read').slideUp(200);
$(this).hide();
$(this).parent().find('.read_more').show(200);
});
});
I have researched this and cannot find an answer. The solutions I have found have not resulted in success.
I am building a WordPress Template and I have a section that contains dynamic tabs. When the user selects a particular tab, the data below it changes accordingly.
However, I cannot get it to scroll down on focus like a normal in-page anchor would do. My relevant code is:
Link:
<span><?php the_sub_field('work_tab_title');?></span>`
Anchor:
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
My current functionality is working in terms of the tabs changing except for the scroll/focus of the anchor. This would be easier if I could give you the URL but I am not sure if that is against etiquette here, let me know please.
Thank you
It has come to the point where a larger section of code is needed for context and better understanding:
<div class="container">
<ul class="tab-strips">
<?php $i=0; $j=1; while(has_sub_field('work_slider')):?>
<?php
$string=get_sub_field('work_tab_title');?>
<li data-bottom-top="top:-30px; opacity:0;" data-center="top:0px; opacity:1;"><a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span>
<?php the_sub_field('work_tab_title');?>
</span></a></li>
<?php $i++; $j++; endwhile;?>
</ul>
</div>
<?php $i=1; while(has_sub_field('work_slider')): ?>
<?php $string = get_sub_field('work_tab_title'); ?>
<?php $slider_title = get_sub_field('slider_title'); ?>
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
<?php ?>
<script type="text/javascript">
document.getElementById('<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content').scrollIntoView(true);
</script>
<?php if(get_sub_field('inner_slider')):?>
<div class="container">
<div class="row" style="margin-left:9.6%;">
<h3>
<?php echo $slider_title; ?>
</h3>
</div>
</div>
<div class="slider">
<div class="container">
<div class="row">
<ul class="clearfix work-slider-controls" id="work_slider_controls<?php echo $i;?>">
<?php $j=0; while(has_sub_field('inner_slider')):?>
<li><a class="work-slider-tab" href="#" data-work-index="<?php echo $i-1;?>" data-slider-index="<?php echo $j;?>" rel="<?php echo $j;?>">
<?php the_sub_field('work_inner_title');?>
</a></li>
<?php $j++; endwhile;?>
</ul>
</div>
</div>
</div><!-- slider -->
I am working on a mosaic of thumbnails linking to child pages. The code works in such a way that the child pages display in an iframe overlaying the content. However the client wants only 4 of these pages to have content, so the code needs to work in such a way that ONLY if the child page has content, does the rollover get enabled to open as an iframe overlay.
I currently have the following code. Any ideas how i could customise it so that the overlay is enabled ONLY if the child page has content? Many thanks.
<section id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<section id="content_team" class="entry-content js-masonry">
<?php $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = " . $post->ID . " AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); ?>
<?php if ($child_pages) : foreach ($child_pages as $pageChild) : setup_postdata($pageChild); ?>
<div class="child-thumb">
<div id="click_overlay" onclick="var overlay = document.getElementById('hidden_overlay');
overlay.src = 'about:blank';
overlay.style.display = 'block';
overlay.src = '<?php echo get_permalink($pageChild->ID); ?>';"><span class="featured-title-overlay">
<span class="featured-title">
<span class="title"><?php echo get_the_title($pageChild->ID); ?></span>
<div class="hr"> </div>
<span class="title_link">Read more...</span>
</span>
</span><?php echo get_the_post_thumbnail($pageChild->ID); ?></div>
<br class="clear" />
</div>
<?php endforeach;
endif;
?>
</section>
</article>
<?php endwhile;
endif; ?>
<iframe id="hidden_overlay" src="about:blank"></iframe>
<p class="clear"> </p>
</section>
I'm sorry if this is already asked. I couldn't find it.
I'm making an AJAX chat system. It's going great, the only problem I'm having is that I need the chat to automatically refresh itself every second. I know this can be done with the load() function...
But I would like to refresh the div and the PHP inside it, now load it from another script.
My piece of code(JS):
<script>
setInterval(function() {
$('#container').load();
}, 1000); </script>
And the div I want to reload/refresh every second:
<div class="container" id="container">
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
</div>
And if I do $('#container').load('index.php'); it will give me this(the site will also be very slow): $('#container').load('index.php');
Thank you very much for helping in advance! My English is also very bad due that it's not my mother language :-)
Don't you think it will be cleaner to just include() your "message pooling" script inside your <div class="container" id="container">, so that your main chat page will now have:
<div class="container" id="container">
<?php
include("chatScript.php");
?>
</div>
Then chatScript.php will contain:
<?php
$queryChat = $mysqli->query("SELECT id,message,username,date FROM chat ORDER BY id DESC LIMIT 0, 10");
while($infoChat = $queryChat->fetch_array())
{
?>
<div class="text">
<div class="name"><?php echo $infoChat['username']; ?></div>
<div class="time"><?php echo $infoChat['date']; ?></div>
<div class="body"><?php echo $infoChat['message']; ?></div>
</div>
<?php
}
?>
Then you can simply do
<script>
setInterval(function() {
$('#container').load();
}, 1000);
</script>
after loading <div class="container" id="container">.
Hope this helps