Develop Reference

FireFox and <a href scrolling to a page part like div

I have a style for image button :
.sticky {
position: fixed;
top: 50px;
width: 120%;
z-index: 1;
}
#media screen and (min-device-width : 100px) and (max-width: 600px) {
.sticky{
display:none;
}
}
and script for these:
window.onscroll = function() {
myFunction();
}
var backarrow = document.getElementById("back");
var sticky = backarrow.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
backarrow.classList.add("sticky");
} else {
backarrow.classList.remove("sticky");
}
}
it actually works! But I do not understand why Clicking is disabled for FireFox while other browsers do not have problems with it. z-index is set to 1 but other browsers are fine with it but FF. what I can do about it and how to fix it?
Thank you very much who knows!

I just did this for image buttons links:
<a href="#top" <a href="#wrap"
Supposed to work for any browser. This even not a script. but probably not good css enough that I have.
'>
<img alt="" class="mainlogo" src='data:image/png;base64,<?php echo base64_encode(file_get_contents("******.png")); ?> '>
<button class="right"> <img alt="" id="forward" class="logo" style='max-width: 40px;' src='data:image/png;base64,<?php echo base64_encode(file_get_contents("*****/Pictur3.png")); ?> '> </button>

I solved the problem!!!!!!!!!!
What I did is used my button id for my jquery script insted of img id. Thus, entire button would scroll down insted of only image and therefore I could implement
<button onClick="location.href = '#top'"
insted of any
<img onclick or <href onclick
events that I tried and do not work.
Hope it helps anybody too as example:)

Using Javascript/Php: Trying to display background image - logic wrong?

So I want to display a background image (that is the thumbnail image in wordpress post) using css in hero-wrapper div if the screen size is min. 900px.
I have using php to check if there is a thumbnail image, then using javascript to check screen width and then adding background-image property to the dive. Not working, I think my logic is wrong??
HTML
<?php
if ( has_post_thumbnail() ) { ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
<?php } ?>
<section class="hero-wrapper">
<figure class="frontpage-hero">
<div class="banner-box">
<h2>GET YOUR FREE CASE ASSESSMENT?</h2>
<h6>Enter your details below for a consultation</h6>
<form>
<input type="text" name="name" placeholder="Name..">
<input type="text" name="email" placeholder="Email..">
<input type="submit" name="submit">
</form>
</div>
</figure>
</section>
css
.hero-wrapper {
margin: 0;
padding: 0;
min-height: 669px;
background-repeat: no-repeat;
}
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
}
}

You are echoing a <section> tag inside a <script> tag.
You should change this
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<?php echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >'; ?>
}
</script>
To something like this
<script type="text/javascript">
if (jQuery(window).width() >= 900) {
$('.hero-wrapper').css('background-image', 'url(' + <?php echo $thumb['0']; ?> + ')');
}
</script>

Your assumption is wrong twice:
your jQuery(window).width() == 900 condition will run only once and will not reflect window size changes
you're trying to use php (server side language) to output html (client side markup) inside javascript (client side code) code block. You will end up with syntax error.
Correct approach is to just output your html element and use CSS media queries to control its appearance. Something like:
.hero-wrapper {
display: none;
}
#media (min-width: 900px) {
.hero-wrapper {
display: block;
}
}
Please also notice that image displayed as background will not enforce element to have any height and hence your element will show up with 0px height (invisible in other words). You will need to specify element's dimensions somehow (and remember that images may have different aspect ratios).
After all it may be easier for you to not use background image but insert normal image instead and control its dimensions using CSS.

You're not adding anything to the existing "hero-wrapper" div with your code, you're just echoing some HTML within a Javascript block, which won't achieve anything. You've almost certainly got syntax errors in your console. The final rendered page will look something like this:
<script type="text/javascript">
if (jQuery(window).width() == 900) {
<section class="hero-wrapper" style="background-image: url('thumbnail.png') >
}
</script>
<section class="hero-wrapper">
<figure class="frontpage-hero">
...etc
This will get you a JS console error along the lines of:
Uncaught SyntaxError: Unexpected token <
Even if that part worked, the HTML is also invalid because you never close the style attribute with a ", and this code will only ever execute when the window width is exactly 900px, which I don't think you intended.
What you need to be doing is altering the existing div to add the style, and also allow it when the width is greater than or equal to 900px. This should do it:
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width() >= 900) {
$(".hero-wrapper").css("background-image", "url('<?php echo $thumb['0']; ?>')");
}
});
</script>
I also wrapped the code in document.ready so that it won't run until the page is ready.

I'd remove the javascript and do this in your CSS media queries with display: none; to hide the element for screens under 900px i.e
HTML/PHP
<?php
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'full' );
echo '<section class="hero-wrapper" style="background-image: url(' . $thumb['0']. ') >';
} ?>
And in your CSS
#media screen (min-width: 900px) {
.hero-wrapper {
min-height: 669px;
background-repeat: no-repeat;
display: block;
}
}
#media screen (max-width: 900px) {
.hero-wrapper {
display: none;
}
}

How to have multiple owl carousel sliders on the same page and move 1 item with click?

I am going nuts with a problem I cannot solve on my own.
I am creating a single pager that features multiple owl carousel slideshows. All the information is being fed in with variables because I am using the kirby cms. So therefore I cannot just add more classes or IDs to each unique slideshow because the whole thing needs to be working with a cms.
What I need this page to do but cannot figure out how, is: I want the user to be able to click on one image in the slideshow which then scrolls automaticly to the center (I am using center: true in the owl carousel settings). What is happening, is: All the slideshows on the page are moving their items, which is of course not what I want it to do.
Here's my code:
JS
var $owl = $('.owl-carousel');
$owl.children().each( function( index ) {
$(this).attr( 'data-position', index ); // NB: .attr() instead of .data()
});
$owl.owlCarousel({
margin: 20,
nav: false,
dots: true,
autoWidth:true,
items: 3,
loop: false,
center: true,
});
$(document).on('click', '.item', function() {
$owl.trigger('to.owl.carousel', $(this).data( 'position' ) );
});
CSS
.item {
cursor: pointer;
transition: margin 0.4s ease;
}
.item.center {
cursor: auto;
margin: 0;
}
.item:not(.center) > div:hover {
opacity: .75;
}
HTML
<?php foreach($data->children()->visible() as $singleproject): ?>
<div class="project-container">
<div class="owl-carousel owl-theme project-container-height-adj">
<?php foreach($singleproject->images() as $image): ?>
<div class="item">
<img src="<?= $image->url() ?>" />
</div>
<?php endforeach ?>
</div>
<h1><?php echo $singleproject->title() ?></h1>
<h2><?php echo $singleproject->description() ?></h2>
</div>
<?php endforeach ?>
I basically know that the problem is the .item selector: my JS is making every .item on the page move. But I honestly don't know how to just access the .items that belong to the same div as the .item I am clicking on when I want my slideshow to move.
Can please anyone help me?
Much appreciated

Change image once we hover on image is not working

once we hover on image, i want to display another image.
<div>
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>
i tried as below :
I added class="a1", but it did't worked for me.
<a class="a1" href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');"
title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
css
.a1:hover {
background-image: url('images/G+1.png');
}

Here are two solutions for your query. (Change image on mouse hover)
HTML + JavaScript Demo
<div class="image_hover">
<a href="#" rel="nofollow">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
</a>
</div>
HTML + CSS Demo
.image_hover {
position: relative;
cursor: pointer;
}
.image_hover img {
position: absolute;
transition: opacity .5s ease;
}
.image_hover img:hover {
opacity: 0;
}
<div class="image_hover">
<img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
<img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>

First, give your link tag some style, to set it's background.
a.a1 {
display: block;
width: 100px;
height: 50px; (width and height are whatever you need them to be)
background: url('images/G+.png') no-repeat center center;
}
Now this is a very light example here, but what it is doing is setting your link as a block-level element, giving the right dimensions of the image background, and then setting the whole elements background as the image.
Then, for the rollover effect, you use:
a.a1:hover {
background: url('images/G+1.png') no-repeat center center;
}
Now I like to put my no-repeat and positioning attributes in the background attribute, you can separate these into background-size etc if you really want.
I am aware in your implementation you have an img in there setting the picture, but for what you want to achieve I'd suggest using a css alternative.
SO link on the subject (as per comment):
CSS: image link, change on hover

Additional the answer in #AaronLavers's comment (use background-image and replace it on :hover), you can use :before - pseudo class and content property.
The plus
It's generic solution. You have not to set the width and the height of the link - like in background-image way.
The minus
You can't change the image's size like using background-size etc. but if your image is the exact size you want, the problem solved.
a:before {
content:url(http://i.stack.imgur.com/upUcm.jpg);
}
a:hover:before {
content:url(http://i.stack.imgur.com/sn2Ag.jpg);
}

The reason this is not working is because the img tag and background-image are 2 different things. If you want this to work, you could try putting the background image on the a to begin with and then changing it on hover. It needs important because of specificity rules. The other option would involve putting php in your css file, but that is probably not worth the effort to set up.
CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}
HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>

Adding AutoScroll inside a DIV-Javascript

How do I add an auto scroll function to the below file?
By auto scroll I mean it automatically scrolls to the bottom within the scrollable area and then start from the top again.
I tried different JavaScript code, but none of it worked.
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<?php foreach ($all_news as $news) { ?>
<div align="center">
</div>
<div style="
width: 98%;
height: 200px;
overflow-y:auto;">
<script type="text/javascript" src="http://domain.com/file.php"></script>
<div id="feedmain" class="feed11">PFeed</div>
</div>
</div>
<?php } ?>
</div>
</div>
The file.php we are loading is only an HTML table.

You can use overflow-y:scroll instead of overflow-y:auto.

This one worked for me.
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Use CSS
.divClass{
overflow:scroll;
}