We Keep Coding

Script appending "=s1400" to image src path and now image will not load

I understand HTML/CSS pretty well, but not JavaScript. There is a script appending "=s1400" after image path. Why? Image will not load because of this. URL is https://zenith-express.com/airfreight.html (source files can be seen with Chrome DevTools).
Source HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder load-high-res shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" />
Displayed HTML:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="https://zenith-express.com/imgs/af_service_area.png=s1400" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">

I found the answer.
I needed to add "data-width-before-shrink="700" to image tag like this:
<img id="vbid-cfb2edc5-mm7avm4t" class="blocks-inner-pic preview-element magic-circle-holder shrinkable-img" data-menu-name="HEADER_IMAGE" src="./imgs/af_service_area.png" data-orig-width="688" data-orig-height="420" data-width-before-shrink="700" style="background-image: none;">

Save a canvas with border

I've been writing a mini image editor. Upon uploading the to-be-edited image, I draw it into a canvas. One of the editing tools is to add a picture frame, which is taken from several sample images
This is the relating part of my HTML code
<div id="canvas-frame">
<canvas id="edit-canvas" width="500"></canvas>
</div>
<div id="border-tool" class="tab-pane fade">
<div class="border-selection active">
<img src="img/hien/no-border.jpg" id="no-border">
</div>
<div class="border-selection">
<img src="img/hien/border1.png">
</div>
<div class="border-selection">
<img src="img/hien/border2.png">
</div>
</div>
And this is the JavaScript code implementing it
$('#canvas-frame').width($('#edit-canvas').width());
$('#canvas-frame').height($('#edit-canvas').height());
function placeBorder(src){
$('#canvas-frame').css('border-image','url('+src+') 30 round');
$('#canvas-frame').css('border-width','20px');
}
$('#border-tool .border-selection img').click(function(){
$('#border-tool .border-selection.active').removeClass('active');
$(this).parent().addClass('active');
if ($(this).attr('id')=='no-border'){
$('#canvas-frame').css('border','none');
} else{
placeBorder(this.src);
}
});
As you can see, my idea is to use the canvas-frame div to wrap around the canvas, then try changing css of it. But now I encounter another problem, how to implement a Save button to download the canvas with the bordering frame around it. Could you please give me any suggestions or tutorials to do it? Thanks a lot

Background image slideshow not working properly

I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect

It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.

I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.

This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"

Radio Buttons not working when in a div

first of all i'm not sure if i'm in the right topic for this if i'm not, please tell me but anyway, i have this code
<audio id="radioplayer" src="http://habbohol.radioca.st/;" autoplay="autoplay" ></audio>
<div id="play"></div>
<div id="stop"></div>
<div id="volup"></div>
<div id="voldown"></div>
It's for my site and i'm trying to get them to work, but when its in a div the buttons never play/stop/go up/down but if it's in a image or word for example it plays just fine, the odd thing it was working earlier in a div with the exact same code but with different div codes. It would be really appreciated if you could help, I believe this is Javascript but i'm not paralytically sure tbh

I listened the music but your divs are empty if you want to see your link you need put a string into you div like: <div>Button</div>

I think you forgot to put the semicolon after what's in the onclick quotations.
Try this (assuming the functions in themselves work):
<div id="play"></div>

Play/Show "swf" in a "a rel="""

I have this working code for IMAGES:
<a class="showimage" rel="http://www.sitename/images/image.png" >
<span>hover here</span>
</a>
plus some javascript and css code.... so the final result is now when you hover on "hover here" it shows the actual IMAGE "http://www.sitename/images/image.png" - something like this ( http://goo.gl/jhyNm )
What I want to ask is, is it possible to show/play .SWF file instead of image.... so the process is the same, I hover on "hover here" text and it shows the .SWF ?
Any help will be appreciated.
Thanks

I'm not 100% sure, but you can try to embed SWF in div element and using JS detect mouse over event on "hover here" and then show or hide div.

About "showing" the .swf file - it's pretty easy,
about "playing" it - I don't really know if it's possible just with js.
I guess you'll need some API involved. (an autoplay option if exists).
Anyway,html:
<a href='#' id='showMovieText'>
Hover Me
<div style='display:none'>
<!--EMBEDED SWF FILE HERE-->
<embed ....>
</div>
</a>
jQuery:
$('#showMovieText').hover(function(){
$(this).find("div").css('display','block');
});
Demo: http://jsfiddle.net/YbWgh/