Making all images' sources https:// using *.user.js - javascript

EDIT: Why doesn't this work?
#match http://tumblr.com/*
$(document).ready(function() {
$(img).each(function() {
var i = $(this).attr("src");
var n = i.replace("http://", "https://");
$(this).attr("src", function() {
return n;
});
});
});​
EDIT: To be clear, I DO NOT OWN THE WEBSITE. I want to have images on sites like https://facebook.com/ and https://tumblr.com/ be on https.

hey man it's so simple as far i can understand that you want! You want to change all images src?
$(document).ready( function() {
$("img").each( function() {
var i = $(this).attr("src");
var n = i.replace("http://", "https://");
$(this).attr("src", function() {
return n;
});
});
});

The OP was really close, just need to tweak the selector: $(img) to $("img")
$(document).ready(function() {
$("img").each(function() {
var link = $(this).attr("src");
var newLink = link.replace("http://example.com", "//example.com");
$(this).attr("src", function() {
return newLink
});
});
});
jQuery requires the use of quotes around DOM element selectors, the OP script would throw img not defined.

Related

jQuery .load() Messing with Unicode Characters

I have set up a simple AJAX page loading script on my site and so far everything is working except for the Unicode Characters in the <title> get screwed up when loading the new content.
My jQuery setup looks like so:
jQuery(document).ready(function ($) {
"use strict";
var main = $("main");
menuLinks.click(function () {
var href = $(this).attr("href"),
ajaxLoad = function (html) {
document.title = html.match(/<title>(.*?)<\/title>/)[1].trim();
main.fadeIn('slow');
};
history.pushState(null, null, href);
main.fadeOut('slow', function () {
main.load(href + ' main>*', ajaxLoad);
});
return false;
});
});
My <title> have dashes in them and they end up as – when the page titles are loaded. I'm under the impression that this has to do something with jQuery and HTML using different encoding but am not sure how to solve the problem.
jQuery(document).ready(function ($) {
"use strict";
var main = $("main");
menuLinks.click(function () {
var href = $(this).attr("href"),
ajaxLoad = function (html) {
document.title = html.match(/<title>(.*?)<\/title>/)[1].text().trim();
main.fadeIn('slow');
};
history.pushState(null, null, href);
main.fadeOut('slow', function () {
main.load(href + ' main>*', ajaxLoad);
});
return false;
});
});
I ended up using document.title = $(html).filter('title').text(); instead of document.title = html.match(/<title>(.*?)<\/title>/)[1].trim(); and it seemed to do the trick in solving the unicode character issue.

Toggle images on click using jQuery

I have two images which I need to toggle on clicking on the image.
<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png'
data-src='images/prof_arrow1.png' />
When the user click the image the src should get the value of data-swap and when you click again the src should change to data-src. This should keep happening just like a toggle. Any help appreciated.
$("#arrowRotate").click(function() {
var swapImage = $("#arrowGrey").attr("data-swap");
$("#arrowGrey").attr({
'src': swapImage,
id: 'arrowOrange'
});
});
This is where I have got so far.
Based on my understanding from your question, Hope this is the one you expect,
$("#arrowRotate").click(function() {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap",current);
});
DEMO Fiddle
Try This:
$("#arrowRotate").click(function(){
if($(this).attr('src')==$(this).attr('data-src'))
{
var a = $(this).attr('data-swap');
$(this).attr('src',a);
}
else
{
var b = $(this).attr('data-src');
$(this).attr('src',b);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='arrowRotate' src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg' data-swap='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg' data-src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg'>
This might help. I think this is the simplest way of swapping between images:
<img id="arrowRotate" src="images/img1.png" data-swap="images/img2.png" data-src="images/img1.png" onclick="swapImage()" />
function swapImage(){
var swapImage = $('#arrowRotate').attr('data-swap'),
currentImage = $('#arrowRotate').attr('src');
$('#arrowRotate').attr({
'src': swapImage,
'data-swap': currentImage
});
};
If I understand you right you can do it like this:
HTML
<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' data-src='images/prof_arrow1.png' data-swapped="false"/>
Javascript
$("#arrowRotate").click(function() {
var swapped = $(this).attr("data-swapped");
var init = 'false';
if(swapped === 'false'){
var swapImage = $(this).attr("data-swap");
init = true;
}else{
var swapImage = $(this).attr("data-src");
}
$(this).attr({
'src': swapImage,
'id': 'arrowOrange',
'data-swapped': init
});
});

jQuery switch image with fade

I have a script which changes some images on hover. Works really well, however I would like to add a little fade between the two images. Here is the script. Really new to jQuery so I'm a little confused where to add it. Any help would be appreciated
jQuery(document).ready(function ($) {
var img_src = "";
var new_src = "";
$(".rollover").hover(function () {
img_src = $(this).attr('src');
new_src = $(this).attr('rel');
$(this).attr('src', new_src);
$(this).attr('rel', img_src);
}, function () {
$(this).attr('src', img_src);
$(this).attr('rel', new_src);
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function () {
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
function imageSwitch(img) {
var src = img.attr('src');
var rel = img.attr('rel');
img.fadeOut('fast', function() {
img.attr('src', rel);
img.attr('rel', src);
img.fadeIn('fast');
});
}
$(".rollover").on('mouseenter', function() {
imageSwitch($(this));
});
a small search give me that : http://www.simonbattersby.com/demos/crossfade_demo_basic.htm i think it's kinda what you're looking for.
or else you with thread that do something also :
jQuery Change Image src with Fade Effect
it would be better to use .mouseenter for this.
and you could do .animate() opacity to 0 and in the call back you would change the image src, so that the src change after the animation ended.
$('.rollover').mouseenter(function () {
var me = $(this),
new_src = me.attr('rel'),
anmiation_duration = 300; // 300ms
me.animate({
opacity: 0
}, anmiation_duration, function () {
me.attr('src', new_src).css({'opacity':'1'});
})
});
After the src is changed you can do another .animate() to set the opacity back to 1.
I would however suggest to have the other image already displayed behind the first image, (images placed over each other using position:absolut). That way the opacity change would create sort of morf effect.
Briefly tested, thanks to #Oksid for the mouseenter comment.
EDITED
The HTML:
<img class="front rollover" src="http://placehold.it/350x150/006699" rel="http://placehold.it/350x150/000000" />
The CSS:
.image_holder {
position: relative;
}
.image_holder img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.image_holder img.front {
z-index: 2 !important;
}
The jQuery:
function init_rollovers() {
$(".rollover").each(function() {
var w = $(this).width()+'px';
var h = $(this).height()+'px';
var src = $(this).attr('src');
var rel = $(this).attr('rel');
$(this).addClass('shown');
if (!$(this).parents('.image_holder').length) {
$(this).wrap('<div class="image_holder" style="width:'+w+';height:'+h+';"></div>');
$(this).parents('.image_holder').append('<img src="'+rel+'" />');
}
});
}
init_rollovers();
function doImageSwitch(el, speed=425) {
var front = el.find(".front");
if (front.hasClass('shown')) {
front.fadeTo(speed, 0, function() {
$(this).removeClass('shown');
});
}
else {
front.animate({
opacity: 1
}, speed, function() {
$(this).addClass('shown');
});
}
}
$(document).on('mouseenter', '.image_holder', function() {
doImageSwitch($(this));
});

javascript rotate what to change

I have ,
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
});
my problem is when I click outside arrow do not return first position what I must change ?
i can't use css and toggle whit jquery I need to use images with outside place
http://jsfiddle.net/cYCnD/9/
You should add the following handler:
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
$('.arrow').attr('src', 'select_arrow.png');
}
});
See my fiddle: http://jsfiddle.net/cYCnD/10/
The whole code should look like this:
jQuery(function ($) {
var allArrows = $(".arrow"),
arrowUpUrl = "select_arrow_up.png",
arrowDownUrl = "select_arrow.png";
allArrows.click(function () {
var currentUrl = $(this).attr("src");
$(this).attr("src", currentUrl === arrowDownUrl ? arrowUpUrl : arrowDownUrl);
allArrows.not(this).attr("src", arrowDownUrl);
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('arrow')) {
allArrows.attr('src', 'select_arrow.png');
}
});
});
If I understand you correctly, you want to reset the arrows positions when a user clicks elsewhere on the page.
If so, I believe this will work:
$(document).click(function(e){
if(!$(e.target).hasClass('arrow'))
$(".arrow").attr("src", select_arrow.png)
});

How to change page title of root page when loading ajax content?

I'm sure this is very simple, but I'm not getting it.
I'm using the following AJAX script to load content from a particular div of an external page into a div of the same name on my root page.
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
$el;
$(document).delegate(".dyn a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
});
});
$(".dyn a").removeClass("current");
$(".dyn a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Could someone please help me with changing the title of the root page for the title of the page I am loading?
I have tried using:
var newTitle = $(responseHtml).filter('title').text();
document.title = newTitle;
As it mentions in this post, which almost worked but stopped the ajax functioning correctly. I'm not sure, though whether I am placing this in the right place.
Thanks in advance!
Could you possibly want: window.top.document.title = newTitle; ?
I managed to achieve this by adding the following to the hashchange function:
String.prototype.toTitleCase = function(n) {
var s = this;
if (1 !== n) s = s.toLowerCase();
return s.replace(/\b[a-z]/g,function(f){return f.toUpperCase()});
}
newHash = window.location.hash.substring(1);
function changeTitle(title) {
document.title = window.location.hash.replace("#","").replace(/[_]/g,"").replace(".html","").replace("and","+").toTitleCase(); }
changeTitle("");
This takes the title from the page filenames, removes the hash and any underscores, then capitalizes the first letter of each word.
I'm certain there's a better, simpler way of doing this. What I've got will do for now.

Categories

Resources