calling functions from asp.net mvc 3 to nailthumb - javascript

I've just downloaded the nailthumb project from http://www.garralab.com/nailthumb.php but I cant call this function from asp.net mvc 3 of js.
the functions in the examples are called as follow:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({
width:100,height:100,method:'resize',fitDirection:'top left'});
});
</script>
I've tried:
<script type="text/javascript">
$(document).ready(function () {
$('#nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
The js file loads but I cant figure out how to call this functions.
Any Ideas?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.css" type="text/css"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<style type="text/css" media="screen">
.square-thumb {
width: 150px;
height: 150px;
}
</style>
<div class="nailthumb-container square-thumb">
<img alt='' src='#Url.Action("Show", "ConsultorioImagenes", new { id = Model.ID})' />
</div>

You're using the id selector (#) when you're assigning it a class.
This line:
<div class="nailthumb-container square-thumb">
..assigns the nail-thumb-container class. You need to use the class selector (.) in your jQuery call:
<script type="text/javascript">
$(document).ready(function () {
$('.nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>

You have <div class="nailthumb-container square-thumb">
and $('#nailthumb-container').nailthumb({
It should be $('.nailthumb-container').nailthumb({

Related

LARAVEL 5.8 : Window onscroll, scroll not working in blade template

My laravel 5.8 app cannot use the scroll function and I don't know why.
My code is in app.blade.php
<script src="{{ asset('asset\js\jquery.min.js') }}"></script> // 3.3.1
.
.
<script>
window.onscroll = function () {
console.log('scroll')
};
</script>
.
.
.
</body>
What I have tried
$(document).ready(function() {
$(window).scroll(function() {
console.log('scroll')
})
})
It is still not working. What did I do wrong?
try scrollIntoView
function scrollToC() { divC.scrollIntoView(); }
window.onscroll = function () { console.log('scroll') };
html { scroll-behavior: smooth; }
.block { height: 1000px; width: 300px; margin: 20px; background: yellow; )
<button onclick="scrollToC()">Scroll to C</button>
<div id="divA" class="block">a</div>
<div id="divB" class="block">b</div>
<div id="divC" class="block">c</div>
Add this code in your app.blade.php
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function() {
console.log('scrolled');
console.log(window.pageYOffset);
});
});
</script>
</head>
<body>
<div id="app" style="height:1000px;">
<!-- your contents -->
</div>
</body>

jQuery - Rotate image

I tried to create image rotate but it's not working. I tried different codes from different sites but don't know what's wrong.
This is my code.
var value = 0
$("#image").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
#image{
margin:200px 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://jqueryrotate.com/images/chrome_32x32.png" id="image" onclick="" />
In your example, jQuery is not defined, check this code:
var value = 0
$("#image").rotate({
bind: {
click: function() {
value += 90;
$(this).rotate({
animateTo: value
})
}
}
});
#image {
margin: 200px 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="include/jQueryRotate.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://i.forbesimg.com/media/lists/companies/apple_416x416.jpg" id="image" onclick="" />

working with multiple javascripts

I have a project with some javascripts. One image viewer, a carrousel, some toggle and now I need to make a pop-up form.
But when I insert the javascript for pop-up... is stop working.
How can I make all work? or any hint to help me create a pop-up form (instead of this I use now).
Thanks in advance
this is the script in header
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css">
<script type="text/javascript">
$( document ).ready(function() {
$(".toggleControl").click(function(){
$(this).siblings(".toggleDiv").slideToggle(1000);
$(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
$(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
});
}); //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});
});
</script>
this is the script in footer
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#owl-example").owlCarousel({
items : 4
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#pro-img-carousel').carousel({
interval: 10000
})
$('#carousel-pro-img').carousel ({
interval:8000
})
});
</script>
<script type="text/javascript">
$(function(){
$('.example').okzoom({
width: 100,
height: 100,
border: "1px solid black",
shadow: "0 0 5px #000"
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
});
</script>
<script>
$(document).ready(function() {
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: [
"<img src='images/left.png' alt='' class=''>",
"<img src='images/right.png' alt='' class=''>"
],
beforeInit : function(elem){
random(elem);
}
});
});
</script>
At first, you included jquery 3 times, bootstrap 2 times.
One time will be enought.
Since you are using Bootstrap, will be good to use this http://getbootstrap.com/javascript/#modals

jqplot not showing cursor

Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Hello Flot</title>
<link class="include" rel="stylesheet" type="text/css" href="/static/jqplot/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/static/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.selection.js"></script>
<script type="text/javascript" src="/static/jqplot/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="/static/jqplot/jquery.jqplot.js"></script>
<body>
<div id="output_plot_container" style="float:left; width: 800px; height: 600px"></div>
<button onclick="updateChart()">Try it</button>
<script >
var plot1 = $.jqplot ('output_plot_container', [[1,2,3,4]], {
title : 'Demodulated signal',
cursor:{zoom:true}
});
var url = "/sensor/demodulated_debug_data";
var updateChart = function() {
$.getJSON(url, function(newdata) {
console.log(newdata);
for (var f_id in newdata)
if (newdata.hasOwnProperty(f_id)) {
if (f_id == 'demodulated') {
plot1.series[0].data = newdata[f_id];
plot1.replot({ resetAxes: true } );
}
}
})
};
timer = setInterval(function(){updateChart()}, 1000);
console.log('still running');
</script>
</body>
</html>
I'm reading documentation and I just can't figure out why it doesn't show the cursor to me.
Try this, it works for me
$(document).ready(function () {
$('#output_plot_container').on('jqplotDataHighlight', function () {
$('.jqplot-event-canvas').css('cursor', 'pointer');
});
$('#output_plot_container').on('jqplotDataUnhighlight', function () {
$('.jqplot-event-canvas').css('cursor', 'auto');
});
});
or
.pointerlink
{
cursor: pointer;
}
<div id="output_plot_container" class="pointerLink" ...>
Turned out that I should include jqplot before the cursor in this html.

How to implement a javascript to the div element that is created in the javascript?

I am using this javascript from this link.
I have created a new div element in javascript using the following code
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
value= VALUE_FROM_DB.split("||");
for (k=0;k<value.length;k++)
{
if (value[0] == paramName1)
{
return unescape(value[k]);
console.log("no of swipe views ");
}
var val = k+1;
var superdiv = document.getElementById('swiper-wrapper');
var newdiv = document.createElement('div');
var divIdName = 'swiper-slide'+val;
console.log("div name: "+divIdName);
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('class','swiper-slide');
newdiv.style.width = "25%";
newdiv.style.height = "30%";
superdiv.appendChild(newdiv);
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}
html code
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
css code:
.clinical
{
font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
width:auto; height:30%; display:block; overflow:hidden;float:left;
}
the output comes like this
but i would like to get it like this
on swiping i should get it like this
Please suggest me ways to solve this problem..
EDIT: I have given the following code after the style and before javascript.
</style>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
<script type="text/javascript" charset="utf-8">
EDIT 2:
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
document.querySelector('.swiper-container');
i added this document.querySelector('.swiper-container'); as well as
function onDeviceReady()
{ var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
});
The only improvement is that only the 1st slide is there, it's not swiping.
There is no Jquery in your code but only native javascript.
I recommend you to give a look at this plugin.http://plugins.jquery.com/jcarousel/
This is a jquery Carousel. I already used it and it's simple, well documented and flexible.
Click "view homepage" on the top right corner and check demos in the developper's page.
EDIT here a sample code using JCarousel to help you :
<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
<html>
<body>
<div id="swipe_body">
<div class="swiper-container swiper-threshold" id="mycarousel">
<div class="swiper-wrapper" id="swiper-wrapper">
<div id="container1" class="container"><span><img...</span></div>';
<div id="container2" class="container"><span><img...</span></div>';
<div id="container3" class="container"><span><img...</span></div>';
... ...
</div>
</div>
</div>
</body>
</html>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// optional configuration goes here
});
});
</script>
As you can see, only 2 line of jquery to get this.
You can download jquery.jcarousel.min.js at the url given above. Just create your several conteners with the data from the server. Remember, avoid giving same id to differents elements
for (k=0;k<value.length;k++){
...
var cnt1 = '<div id="container" cla
...
They will all have the same id.

Categories

Resources