Develop Reference

Troubleshooting conflicting elements on a website

I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.

Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});

How to link a url in a javascript image

I need to put a href in the image to link with a url, this would be done in the three images that contain the code below. When someone "click" on the image go to another page.
<div class="header_slider">
<script src="{{skin url=''}}js/camera.js" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '32.882%',
minHeight: '50px',
loader : false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
// ]]></script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_1"></div>
</div>
</div>
<div data-src="{{media
url="wysiwyg/slideshow/OfertaCarrossel_Kits_0002.005.00020.jpg" }}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_2"></div>
</div>
</div>
<div data-src="{{media url="wysiwyg/slideshow/OfertaCarrossel_Sofa_0006.004.00021_FIN.jpg"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_3"></div>
</div>
</div>
</div>
<div class="clear"></div>

You could add a class on each div with data-src tag and use JQuery on click event to redirect them to another page. Add another data tag to store the destination url.
For example on the HTML
<div class="clickMe" data-destination="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
And your Javascript
$('.clickMe').on("click", function() {
window.location.href = $(this).data('destination');
});
EDIT: Actually, the plugin that you use have the functionality built into it already. On your div add data-link attribute like below. Read through all of its functionality here https://www.pixedelic.com/plugins/camera/
<div data-link="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">

how to $(".class").load part of external html div along with css/js

I have a div loadContent in my main html, loading successfully with my external html, instead of loading the whole html i decided to load just 1 part of the div, but if i just load that one part, it won't link with my external css anymore.
my external HTML
<html>
<head>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="main.css"/>
<!-- JS
================================================== -->
<script type="text/javascript" src="portfolioAjax.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="sixteen full columns alpha omega">
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="http://i.imgur.com/5bGrqhU.jpg" alt="logo" img-title="Dog So Cute" img-desc="A bunch of cute dog lol" author-name="Andrew" author-special="IAT" author-about="just a normal guy" author-skills="photoshop and stuffs" author-email="andrew#hotmail.com" author-web="yahoo.com.sg" author-img="images/andrew.jpg">
<h2 class="caption">des<br />GAD Portfolio1</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic2.jpg" alt="logo" img-title="2 cute human" img-desc="err, 2 human." author-name="Daniel" author-special="IAT" author-about="mr simple" author-skills="know it all" author-email="daniel#hotmail.com" author-web="wikipedia.com" author-img="images/daniel.jpg">
<h2 class="caption">bee<br />GAD Portfolio2</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic3.jpg" alt="logo" img-title="i am scared" img-desc="please don't bite me">
<h2 class="caption">tee<br />GAD Portfolio3</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic4.jpg" alt="logo" img-title="look at my eyes" img-desc="i'm so cute">
<h2 class="caption">fee<br />GAD Portfolio4</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic5.jpg" alt="logo" img-title="well..." img-desc="i don't know what is this">
<h2 class="caption">foon<br />GAD Portfolio5</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic6.jpg" alt="logo" img-title="hi" img-desc="some candid shyt">
<h2 class="caption">yea<br />GAD Portfolio6</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic7.jpg" alt="logo" img-title="Sup friend" img-desc="ok can">
<h2 class="caption">ded<br />GAD Portfolio7</h2>
</div>
<div class="img_section four full columns alpha omega">
<img class="four full columns test_img alpha omega" src="images/pic8.jpg" alt="logo" img-title="oh my god" img-desc="i forgot my clothes." author-name="Jassalyn" author-special="IAT" author-about="DUX Pro" author-skills="Everything" author-email="jess#hotmail.com" author-web="dux.com.sg" author-img="images/jessalyn.jpg">
<h2 class="caption">bef<br />GAD Portfolio8</h2>
</div>
</div>
</div>
</body>
if i just load the above file as a whole it works, but if i just load #content, the .js and .css will disappear. Any solution for it?
my Jquery
$(function() {
$("#tab_gad").click(function() {
$('.loadContent').load('portfolio_gad.html #content'); // js and css file gone
$('.loadContent').load('portfolio_gad.html'); // works fine since i import everything include heading
});
});
Please advise if u have a easier way that i should approach towards.
Summary to what i want to achieve.
main html load a div of external html(with js & css intact)
my approach: i duplicated the main css and js to let my external html link towards it since my main html and external html are almost the same, just different content. Not sure if i am doing this the right way please advise

You can load your content and use the callback function to load your JS and css. Something like this:
$(function() {
function loadJS( scrpt, fn ) {
var el = document.createElement('script'),
body = document.body;
el.type = 'text/javascript';
el.src = scrpt;
if ( typeof fn === 'function' ) {
el.onload = fn();
}
body.appendChild(el);
}
function loadCSS( scrpt, fn ) {
var el = document.createElement('link'),
body = document.head;
el.type = 'text/css';
el.media = 'all';
el.rel = 'stylesheet';
el.href = scrpt;
if ( typeof fn === 'function' ) {
el.onload = fn();
}
body.appendChild(el);
}
$("#tab_gad").click(function() {
$('.loadContent').load('portfolio_gad.html #content', function() {
loadJS('/path/to/whatever.js');
loadCSS('/path/to/whatever.css');
});
});
});

That is because the code you're executing (appended #content) would only load the HTML of the element with the ID set to content.
Since other elements don't have that ID they will be ignored while being downloaded. You can, however try to load the whole HTML page without the content element. Scripts and style techniques must be downloaded in order for them to work, but that code would never bother downloading any script or css file since you're not asking for it. You're just asking it to download the #content part.
You can somehow change your HTML to look like this,
<!-- HTML -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="link/toStylesheet.css" />
</head>
<body>
<div class="loadContent">
<!-- leave it empty initially -->
</div>
</body>
<script>
// Place your scripts here -->
// Load the content now -->
$(document).ready(function () {
$('.loadContent').load('portfolio_gad.html #content');
});
</script>
</html>
Now when you will download the HTML, the scripts and CSS will already be there. So you won't have to face the issue again.

Javascript pre-render Image not being displayed

I'm currently developping a html-page for ipad with a css3-transition slider for various contents.
The problem i encounter is, that images on the next page, which aren't rendered yet, will be rendered while sliding them to the content area (though they are preloaded).
Is there any way to make the Browser render them, without displaying them at initial page request, to prevent the stuttered sliding effect on images?
/EDIT:
Slider I use: slider
structure is like:
<body>
<!-- wrapper -->
<div>
<!-- head -->
<div class="head"></div>
<!-- content area -->
<div class="content">
<div class="container">
<div class="pagination"></div>
<div class="slide-wrapper">
<div class="slide">
<!-- content with images here -->
</div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
</div>
<!-- foot -->
<div class="foot"></div>
</div>
</body>
Image-Preloading:
function preload() {
$('img').each(function(){
$('<img/>')[0].src = $(this).attr('src');
});
}

This will force browser to preload all images
$('img').each(function(){
var image = new Image();
image.src = $(this).attr('src')
});

A general technique is to set them as visibility: hidden (inline style to ensure it is applied even before any external CSS is downloaded) - And setting it to visibility: visible on image.onload handler.
<img src="..." style="visibility: hidden" onload="this.style.visibility = 'visible';">
Edit
$('img').each(function(){
$(this).css('visibility', 'hidden');
$('<img/>')[0].src = $(this).attr('src');
$(this).load(function() {
$(this).css('visibility', 'visible');
});
});

Mouseover text then Change Image not Working in IE8-below

I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>

I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>​
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.