Below is the code where the dots were replaced with numbers previously. But I wanted to replace the numbers to letters this time. You can check the demo website at http://pegu2.onpressidium.com/ and the issue under the section "Exploring The Pegu Club".
As per my understanding to your question , please check the following working example .
var letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
$(".slider").slick({
autoplay: false,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a>'+letters[i]+'</a>';
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: red;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: gray;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
Related
Want to achieve
Vue.js 2.6.10
ruby 2.6.5
rails 6.0.3
Thank you for browsing.
I introduced the Vue library, vue-slick-carousel (https://github.com/gs-shop/vue-slick-carousel), to create the slides.
However, as you can see in the attached video, the behavior becomes unstable in safari.
(Specifically, sometimes when I press the button to move an item, it doesn't move, but if I press it repeatedly, it does.)
The source code is as follows.
I would be grateful if you could tell me the cause and solution.
Chrome
Safari
Source code for arrow buttons
Code
SlickCarouselMixin.vue
<script>
import SlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
export default {
components: {SlickCarousel},
data: function () {
return {
slickOptions: {
dots: true,
arrows: true,
swipe: false,
slidesToScroll: 3,
slidesToShow: 3,
infinite: false,
speed: 1000,
},
}
}
}
</script>
<style>
.slick-prev, .slick-next{
width: 0;
height: 0;
position: absolute;
top: 40%;
}
.slick-prev{
left: -30px;
}
.slick-next{
right: 0;
}
.slick-prev:before, .slick-next:before {
font-family: "Font Awesome 5 Free";
font-size: 90px;
color: #c7c7c7;
line-height: 1;
text-rendering: auto;
display: inline-block;
font-style: normal;
font-variant: normal;
}
.slick-prev:before {
content: "‹";
}
.slick-next:before {
content: "›";
}
.slick-prev.slick-disabled, .slick-next.slick-disabled {
pointer-events: none;
opacity: 0;
}
.slick-dots li.slick-active button:before {
color: #86bc25;
}
.slick-slide > div {
margin: 0.5rem;
}
.slick-slide li > a {
padding: 1.25rem;
}
</style>
Show.vue
<template>
<div>
<div class="m-3 p-3">
<SlickCarousel v-bind="slickOptions" class="other-item-list">
<li v-for="test in tests">
・・・
</li>
</SlickCarousel>
</div>
</div>
</template>
<script>
import SlickCarousel from "../../../common/SlickCarouselMixin"
export default {
mixins: [SlickCarousel],
・・・
</script>
<style>
.lb-nav a.lb-prev, .lb-nav a.lb-next {
width: 50%;
}
.fadeIn {
animation: fadeIn 0.4s;
}
</style>
How can i make this slider with
3 different Images on it
3 Different text on it
Button which will open Modal Dialog like Bootstrap and each Slide's Button will show different text on modal.
Slide must be auto sliding
Please see this screenshot of
Slider Image
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
speed: 300,
dots: true,
arrows: true
});
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick-theme.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick.css" rel="stylesheet"/>
<div class="slider-inner">
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
</section>
</div>
Note: I am using Bootstrap 4.5 in my Project.
Please help, as i am newbie in this field and got this School Project.
You did it!
Now all you have to change is the slidesToShow property in the settings. Although you see 3 slides in your image, there is actually only 1 active slide.
That because centerMode is true and the entire slider will offset to the center, showing a hint of the previous and next slide.
Examine the example below.
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
speed: 300,
dots: true,
arrow: true
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
transform: translate3d(20%, 0, 0) scale(0.8);
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
transform: scale(1);
opacity: 1;
}
.slick-current ~ .slick-slide {
transform: translate3d(-20%, 0, 0) scale(0.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick-theme.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick.css" rel="stylesheet" />
<div class="slider-inner">
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
</section>
</div>
I'm stuck in trying to make a popup using jQuery for a second A tag inside a div. You can see what I tried here:
$(function() {
$(".sites").find("a").eq(1).css("color", "red").dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 500
}
});
$(".sites").find("a").eq(1).on("click", function() {
$(".sites").find("a").eq(1).dialog("open");
});
});
div {
margin: 2rem 0 0 2rem;
width: 300px;
height: 150px;
border: 1px solid gray;
}
a {
display: block;
font-size: 2rem;
color: blue;
padding: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<p>
Finding the second a tag, colouring it in red, then display a pop-up on click when clicking Site 2
</p>
<div class="sites">
Site 1
<br>
Site 2
</div>
How do I force the dialogue popup to open and display "Hello !"?
You can use Ids to reference the second element, also, the function call is slightly wrong. Here it's a correct version:
$(function() {
$("#site2").addClass("color-red");
$("#site2").on("click", function(e) {
e.preventDefault();
$(this).dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 500
},
hide: {
effect: "fade",
duration: 500
}
}).dialog( "open" );
});
}());
div {
margin: 2rem 0 0 2rem;
width: 300px;
height: 150px;
border: 1px solid gray;
}
a {
display: block;
font-size: 2rem;
color: blue;
padding: 1rem;
}
.color-red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<p>
Finding the second a tag, colouring it in red, then display a pop-up on click when clicking Site 2
</p>
<div class="sites">
<a id="site1" href="https://www.site1.com">Site 1</a>
<br>
<a id="site2" href="https://www.site2.com">Site 2</a>
</div>
i have problem with wavesurferjs
It is overflowing the parent div
It is happening for the first time and on resize of the parent div
On resize it should fit the parent div
Question: when parent div is resized waveform should adjust itself to accomodate
it is shown in the below image:
here is my code:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-created', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click',function(){
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
Please help me thanks in advance!!!
The documentation of wavesurfer mentions the responsive and fillParent options, which should solve the problem.
reponsive is available as of waveSurfer v2.0.0 (source), so an upgrade is needed, in case you are using the version 1.2.3 as in the example snippet.
Latest stable version is 3.3.1.
Edit, as a comment mentions that npm is not in use:
The recent builds of the library can be found in a cdns:
wavesurfer.js/3.3.1/wavesurfer.min.js
wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js
Edit2: As documented:
You need to include the plugin's configuration when creating an instance of WaveSurfer:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
plugins: [
WaveSurfer.regions.create({})
]
});
Registering the plugin during the instantiation of wavesurfer solves the problem, as demonstrated in the snippet below.
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false,
plugins: [
WaveSurfer.regions.create({})
]
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
window.setTimeout(() => {
wavesurfer.regions.clear();
var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
regs.forEach(e => wavesurfer.addRegion(clear(e)));
}, 100);
}
});
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-updated', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
resizeObserver.observe($('#wavesurferContainer')[0])
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$(document).on('click','.toggle-width',function(){
console.log('clicked');
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
// you can put here implementation of our redraw.
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/wavesurfer.min.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
I found a fix for your current version of wavesurfer.js.
All I did is update drawer size and call redraw method when you change the container width. But then the regions doesn't get updated. So I took the current regions values to a temp variable and removed regions and redraw. Now the region will be in proper position and proper size.
Next issue was that the handle bar keeps moving out of the container and the region starts acting crazy. You can fix it with simple css trick by applying the following css code.
Hope it helps.
handle.wavesurfer-handle-end{
transform: translateX(-100%);
}
Here's a snippet of a working solution.
$('document').ready(function() {
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop: false,
});
wavesurfer.on('region-created', function(region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function(readyObj) {
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave) {
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click', function() {
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
wavesurfer.drawer.updateSize();
wavesurfer.drawBuffer();
var region_list = wavesurfer.regions.list;
var region_keys = Object.keys(region_list);
region_keys.map(function(key){
var temp_region = {
start: region_list[key].start, // time in seconds
end: region_list[key].end, // time in seconds
color: region_list[key].color,
loop: region_list[key].loop,
multiple: region_list[key].multiple,
drag: region_list[key].drag
};
region_list[key].remove();
wavesurfer.addRegion(temp_region);
});
});
});
handle.wavesurfer-handle {
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
handle.wavesurfer-handle-end{
transform: translateX(-100%);
}
#wavesurferContainer {
position: relative;
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before {
bottom: -17px !important;
top: unset !important;
}
#waveform {
position: relative;
margin-top: 10%
}
#waveform wave {
overflow: unset !important;
}
span.toggle-width {
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js">
</script>
<div id="wavesurferContainer">
<span class="toggle-width">
</span>
<div id="waveform">
</div>
</div>
There is no such functionality in your version of this library, but you still can implement such. Below is working example. Key here is to force to rerender buffers (here drawBuffer()). Regions are separate thing and we just remove and add them manually after redraw (not sure if best idea... but works).
//this needs to be called after resize!
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
wavesurfer.regions.clear();
regs.forEach(e => wavesurfer.addRegion(e));
this snipped needs to be called whenever container size has been changed. Here we are calling it just after such change from code, but in most cases it will be impossible, then you should use ResizeObserver to handle this.
To keep regions in container add such css:
.wavesurfer-region {
max-width: 100%;
}
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
window.setTimeout(() => {
wavesurfer.regions.clear();
var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
regs.forEach(e => wavesurfer.addRegion(clear(e)));
}, 100);
}
});
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-updated', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
resizeObserver.observe($('#wavesurferContainer')[0])
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click',function(){
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
// you can put here implementation of our redraw.
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
.wavesurfer-region {
max-width: 100%;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
I'm trying to output this twitter feed to a tag in the right column, but I can't figure out how to make it work. It seems like the code is set up to print wherever it is located. However, I can't place the code in the body of the page.
http://cusli.org/NiagaraIntlMootCourt/NiagaraMoot.aspx
Here is the code. I have a div tag with id "comments" in the html body.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
Try this:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
var myThing = new TWTR.Widget({ //save you reference
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}); //remove from here
</script>
inside your HTML go
<div>
<script>
myThing.render().setUser('NiagaraMoot').start(); //add here
</script>
</div>
Put the script tag inside the div where you want it to render.
eg:
<html>
<body>
<h1>Hello world</h2>
<div>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
</div>
</body>
</html>
<div id="contentRight">
<!-- this is your right coulmn, put TWitter script here -->
<div class="myTwitter">
<script>
new TWTR.Widget({
version: 2,
....
}).render().setUser('NiagaraMoot').start();
</script>
</div>
<!-- end of your insert -->
<div id="dnn_ContentPane_Right">
....
CSS and main Tweeter JS library should stay in <head> ... </head> tag of you page - prefferably ... if you can not place them there ... they can be anywhere in your page but just before the init part (shown above).
I meen this part:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>