One of my websites went online a few weeks back. The design included an embed tweet within a div which displayed properly at that time.
However while checking today, I noticed the embed tweet has moved to the right in Mozilla. Now what's puzzling me is that I didn't even touch the code, so has twitter or Mozilla updated one of their properties???
heres a link to my site.
OK the problem is solved finally managed overwriting the css created by twitter.
I simply used the following scc selector
"div_containing_twitter_script" iframe {properties}
So if I placed the code in a div with "twitter" as an id the code would be
#twitter iframe {property:value}
Nevertheless thanks a lot for trying to help me out...
If Twitter feeds are not showing you can use this following code.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <p></p> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 1000,
width: 180,
height: 200,
theme: {
shell: {
background: '#88d4ff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#00aeef'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().setUser('#YourUser').start(); /* Need to change User ID*/
</script>
Related
I'm using an owl carousel in Webflow and I can't figure out why it isn't working.
Here's the issue:
On the first load, the carousel looks like this:
Image: On Load
On refresh, it corrects a bit, but then is jumpy!
Image: On Refresh
After another refresh, it looks perfect and works perfectly.
Image: On Refresh #2
I tried to make the owl-stage have a min-width, but that completely disabled the slider. I've added a load function to fix some aspects of the slider but isn't perfect.
Here's a link for you to check out: https://edits-52c37b.webflow.io/product/circus-wood
Here's my code:
<script>
$(window).on('load',function() {
$('.projects-col-list.w-dyn-items').owlCarousel({
margin: 8,
center:true,
nav: true,
loop:true,
autoWidth:true,
animateIn:true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
items:3
});
});
</script>
It was the same problem I solved this way - I hope it helps you too
setTimeout with ready function
$(document).ready(function() {
setTimeout(function(){
$('.projects-col-list.w-dyn-items').owlCarousel({
margin: 8,
center:true,
nav: true,
loop:true,
autoWidth:true,
animateIn:true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
items:3
}).fadeIn();
}, 1500);
});
.projects-col-list.w-dyn-items {
opacity: 0;
}
Many thanks to #Emy for helping me find the solution!
I found out that my owl-stage wasn't working with display: flex, so I changed it to display block, Now I added display flex to the collection list and it worked! Here's my code that worked:
$(document).ready(function() {
setTimeout(function(){
$('.projects-col-list.w-dyn-items').owlCarousel({
margin: 8,
center:true,
nav: true,
loop:true,
autoWidth:true,
animateIn:true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
items:3
}).fadeIn();
}, 1500);
});
I did not incude the code :
.projects-col-list.w-dyn-items {
opacity: 0;
}
As it didn't seem to work for me. Hope this helps someone, I might make a tutorial for this so others can build a cool slider in webflow like this! :)
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
I want to hide this code when users view with right click "Page source". How can I do it?
example 720pizle.com/izle/altyazi/american-sniper.html there is no embed code or video link in source code
You can't totally hide it, but you could use a tool to make it slightly more difficult to read for someone who isn't that technical. However, anyone with basic technical knowledge will be able to figure out the actual embed code using a developer tool (such as the Chrome dev tools, Firebug, etc).
http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
That will make the code harder to read.
It isn't 100% secure though.
For instance, your code:
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
Would turn into:
<script>
<!--
document.write(unescape("%3Cdiv%20id%3D%22film%22%3E...%3C/div%3E%0A%3Cscript%3E%0Ajwplayer%28%22film%22%29.setup%28%7B%0A%20%20%20%20width%3A640%2C%0A%20%20%20%20height%3A360%2C%0A%20%20%20%20playlist%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20file%3A%20%22https%3A//videolink.mp4%22%2C%0A%20%20%20%20%20%20%20%20image%3A%20%22https%3A//videopic.jpg%22%2C%0A%20%20%20%20%20%20%20%20tracks%3A%20%5B%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20file%3A%20%22http%3A//video.srt%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20%22English%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3A%20%22captions%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22default%22%3A%20true%20%0A%20%20%20%20%20%20%20%20%7D%5D%0A%7D%5D%2C%0A%20captions%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%27%23FFFFFF%27%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%2010%2C%0A%20%20%20%20%20%20%20%20backgroundOpacity%3A%2050%0A%20%20%20%20%7D%0A%7D%29%3B%3C/script%3E"));
//-->
</script>
But someone could un encrypt it using a tool, or just use Firebug, etc, to see the actual output.
Yes It is possible. create session variable in php and try to run video code
So, basically, I'm working on my first Tumblr theme here: teenaqe-vow.tumblr.com and everything is fine and dandy so far EXCEPT for the infinite scroll code. What happens is it works perfectly fine until you go to a tagged page like this one. http://teenaqe-vow.tumblr.com/tagged/music What happens is that when you scroll down, instead of loading the next page of the tagged pages, it loads a page from the index page. I'm using a script that keeps the posts all nestled together and renders the infinite scroll and without it there are gaps in the posts and it doesn't work out too well.
I'm really new with this whole thing so I'm kind of at a loss of how to fix it. I apologize if any of the information I provide is inadequate, please let me know if you need something more from me.
Here is the entire theme code: http://pastebin.com/X8DaLKPG
Here is the infinite scroll / masonry part:
{block:IndexPage}{block:IfTwoColumn}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
{block:IfInfiniteScroll}
<div id="pagination"></div>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
});
});
$container.infinitescroll({
itemSelector : "#entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "http://media.tumblr.com/ec1742dbca16ca94b47814f1de4e37e6/tumblr_inline_mj8pf7Te3l1qz4rgp.png",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IfTwoColumn}{/block:IndexPage}
Your pagination link is fixed on the main page (it always points to user.tumblr.com/page/2/). Use the Tumblr API pagination tools instead.
I have been having this same issue on my Tumblr and have finally resolved it, so I thought that I would share my mistake and my resolution in the hopes that it will help a fellow beginner, such as myself :)
This is what I had to start with that was causing the issue:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" href="/page/2" id="next"></a></div>
And this is my resolution:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" {block:NextPage}href={NextPage} id="next" {/block:NextPage}></a></div>
You'll notice that the only change has been made to the href attribute. When you set it to /page/2, it's telling the tag page to show page 2 from the index page, because it is missing the name of the tag from the URL. When you add Tumblr's pagination block tag for next page ({block:NextPage}) and the next page URL ({NextPage}), it will then be able to decipher whether or not you are starting from an index page or a tag page, and then be able to fill in the blanks in the URL by itself. I hope this helps!
If necessary I can explain in more detail but essentially what I need to do is effect CSS changes to HTML text in sync with an audio track - i.e., highlighting words/phrases in sync with the audio playback. I also need to control the audio playback by clicking on the text. I have good HTML/CSS chops, but I’m not as strong with raw js, so I’m hoping there’s a jQuery approach. I’m hoping someone can steer me in the best direction.
Many thanks in advance,
svs
For ease of use, I recommend a combination of jQuery and Popcorn.js for anything where you want to integrate media with HTML, and visa versa. See this jsfiddle post for an example.
For the record, should jsfiddle ever disappear, here's the code:
HTML
<audio id="greeting" src="https://dl.dropboxusercontent.com/u/17154625/greeting.ogg" controls></audio>
<div id="text">
<span id="w1" class="word" data-start="1.0">Hello</span>,
and <span id="w2" class="word" data-start="2.0">welcome</span>
to Stack <span id="w3" class="word" data-start="3.0">Overflow</span>.
Thank you for asking your question.
</div>
CSS
.word {
color: red;
}
.word:hover, .word.selected {
color: blue;
cursor: pointer;
}
JS
var pop = Popcorn("#greeting");
var wordTimes = {
"w1": { start: 1, end: 1.5 },
"w2": { start: 1.9, end: 2.5 },
"w3": { start: 3, end: 4 }
};
$.each(wordTimes, function(id, time) {
pop.footnote({
start: time.start,
end: time.end,
text: '',
target: id,
effect: "applyclass",
applyclass: "selected"
});
});
pop.play();
$('.word').click(function() {
var audio = $('#greeting');
audio[0].currentTime = parseFloat($(this).data('start'), 10);
audio[0].play();
});
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.