Is there a way to get all the CSS rules that are applied to a page? Currently, I'm using jQuery to do it, but is there a server side solution?
var style = "";
//grab all styles defined on the page
$("style").each(function () {
style += $(this).html() + "\n";
});
$.ajaxSetup({ async: false });
//grab all styles referenced by stylesheet links on the page
$("[rel=stylesheet]").each(function () {
$.get(this.href, '', function (data) {
style += data + "\n";
});
});
$.ajaxSetup({async: true});
style = "<style type='text/css'>" + style + "</style>";
You can try with HtmlHead.StyleSheet property
Link : http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlhead.stylesheet.aspx
Related
I am looking for function for WooCommerce which change meta title text in non-active tab. Anybody know how can I do it? I find this JS code but it does not work in themes function.php file:
$(function() {
var message = "Don't forget us";
var original;
$(window).focus(function() {
if (original) {
document.title = original;
}
}).blur(function() {
var title = $('title').text();
if (title != message) {
original = title;
}
document.title = message;
});
});
The following goes into functions.php
add_action('wp_head', function () {
?>
<script>
(function () {
var message = "Don't forget us"
var original
jQuery(window).on("focus", function () {
if (original) {
document.title = original
}
}).on("blur", function () {
var title = jQuery("title").text()
if (title != message) {
original = title
}
document.title = message
})
})()
</script>
<?php
});
You can put that script into a tag <script></script> in the footer.php file wich should be located in your theme (don't forget to actually duplicate this file inside your child theme)
EDIT: Also make sur to have JQuery in your frontend
Is there any solution how to set the background-image to BlogEngine.NET post header. I'm trying to modify custom them PostView.ascx to get first image from post body and set it as background-image to post header, but there is only and i don't know how to get image url from it.
My workaround is that user must added in post editor class "imgheader" to picture which he wants to set as background to post header. Then add
.imgheader {display: none;} to styles.css
Then add script to theme site.master
<script type="text/javascript">
var updateImageHeaders = function() {
var postArticles = document.evaluate("//article[contains(#class,'post-home')]", document, null, null, null);
var article = postArticles.iterateNext();
while (article != null) {
var imgheader = article.getElementsByClassName("imgheader");
if (imgheader.length > 0) {
var postHeader = article.getElementsByClassName("post-header");
if (postHeader.length > 0) {
var imgSrc = imgheader[0].getAttribute("src");
postHeader[0].style.backgroundImage = 'url(' + imgSrc + ')';
}
}
article = postArticles.iterateNext();
}
};
document.addEventListener('DOMContentLoaded', function () {
updateImageHeaders();
});
</script>
i have a magnific popup being displayed dynamically but the image is rendered after the load event so i cannot get the value of the image in the open event. is there any onload event in magnific popup?
function OpenPopup(el) {
var temp = el.innerHTML;
var mysrc = $(temp).attr("src");
var isobj = $.magnificPopup.open({
items: {
src: mysrc,
onload: 'myevent()',
},
type: 'iframe',
closeOnBgClick: false,
markup: '<div class="mfp-iframe-scaler">' +
'<div class="mfp-close"></div>' +
'<iframe class="mfp-iframe" frameborder="0" onload="myevent()"></iframe>' +
'<div class="mfp-bottom-bar">' +
'<div class="mfp-title"></div>' +
'</div>' +
'</div>',
callbacks: {
beforeOpen: function () {
console.log('Start of popup initialization');
},
elementParse: function (item) {
// Function will fire for each target element
// "item.el" is a target DOM element (if present)
// "item.src" is a source that you may modify
debugger;
console.log('Parsing content. Item object that is being parsed:', item);
},
change: function () {
console.log('Content changed');
console.log(this.content); // Direct reference to your popup element
},
resize: function () {
console.log('Popup resized');
// resize event triggers only when height is changed or layout forced
},
open: function () {
console.log('Popup is opened');
debugger;
var iframe = $.magnificPopup.instance,
t = $(iframe.currItem.el[0]);
var contents = iframe.contents();
$(contents).css('max-width', '100%');
$(contents).css('max-height', '100%');
}
}
});
Not a proper solution put i added a timed event which resizes the image once it is loaded. Had to play a lot to get the perfect time so that there is no glitch.
Here is the code:
function OpenPopup(el) {
var temp = el.innerHTML;
var mysrc = $(temp).attr("src");
var isobj = $.magnificPopup.open({
items: {
src: mysrc,
},
delegate: 'a',
type: 'iframe',
closeOnBgClick: false,
});
setTimeout(setImage, 500);
};
function setImage() {
var iframe = $('.mfp-iframe');
var contents = iframe.contents();
$(contents).find('img').attr('width', '100%');
$(contents).find('img').attr('height', '100%');
}
I'm working on my application that creates tabs dynamically and fills them with partial views using ajax.
My question is: how to load css for this views? What's the best way to do it? I mean I can't load the css file on the partial view (no head) or could i?
Some code: the tabManager (a partial view loaded on the main page):
<script>
var tabTemplate = "<li class='#{color}'><a id='#{id}'href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"; // base format for the tabs
$(document).ready(function () {
var tabs = $("#tabs").tabs(); // apply jQuery ui to tabs
$("a.menuButton").click(function () {
var urlContent = $(this).data("direction");
var label = $(this).data("label");
var idTab = $(this).data("id");
var color = $(this).data("color");
var exist = false;
var counter = 0;
$('#tabs ul li a').each(function (i) { // tab already exist o no hay que crear una tabla?
counter = counter + 1; // index counter
if (this.id == "#" + idTab) { // Tab already exist?
exist = true;
$("#tabs").tabs("option", "active", counter - 1); //activate existing element
}
});
if (idTab == "-1") { // is a clickable element?
exist = true;
}
if (exist == false) { // create new tab
addTab(idTab, label, color); // basic tab
getTabContent(idTab, urlContent); // content for new tab
var lastTab = $('#tabs >ul >li').size() - 1; // get count of tabs
$("#tabs").tabs("option", "active", lastTab); // select last created tab
}
});
function getTabContent(idT, urlC) { // ajax call to partial view
$.ajax({
url: urlC,
type: 'GET',
async: false,
success: function (result) {
$("#"+idT).html(result);
}
});
};
function addTab(idT, labT, color) { //create new tab
var label = labT,
id = idT,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label).replace(/#\{id\}/g, "#" + id).replace(/#\{color\}/g, color)),
tabContentHtml = "Cargando...";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
}
// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.bind("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
</script>
<div id=tabs>
<ul>
</ul>
A button example:
<li><a class="menuButton" href="#" title="Permisos" data-id="tab3" data-direction="Permiso/_Administrar" data-label="Label" data-color="blue"><img src="#Res_icons.More">Permisos</a><li>
i found my answer here: http://dean.resplace.net/blog/2012/09/jquery-load-css-with-ajax-all-browsers/
the code:
<script type="text/javascript">
$(document).ready(function () {
$("head").append("<link href='...' rel='stylesheet'>");
});
</script>
I've an Ajax form in the popup I display with your overlay. I submit the popup through ajax, and I need to close the overlay IF the ajax call has been successfull.
Here is currently my JS code:
<script type="text/javascript">
$(function () {
// Handle form submit ...
$("#AddVariableForm").live("submit", function (event) {
event.preventDefault();
var form = $(this);
$.validator.unobtrusive.parse('#AddVariableForm');
$.ajax({
url: form.attr('action'),
type: "POST",
data: form.serialize(),
success: function (data) {
if(data.Success){
$("#adm-form-addVariable").data("overlay").close();
}
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
},
complete: function () {
alert('complete');
}
});
return false;
});
});
</script>
The problem is that it currently don't close anything. I double checked with chrome debug mode, it comes in the method but don't do anything. I also checked, no JS errors.
I tried to do the
$("#adm-form-addVariable").overlay({ api: true }).close()
but same problem.
Here is how I declare it:
$(".adm-btn-overlay-trigger[rel]").overlay(
{
mask: {
color: '#111',
loadSpeed: 300,
opacity: 0.9
},
closeOnClick: true
}
);
If I do this:
$("#adm-form-addVariable").overlay({ api: true }).isOpened()
I get an undefined.
What am I doing wrong?
I'm pretty sure you need to call close on the trigger element, not the overlay:
http://jsfiddle.net/Fwzwc/2/
In your case $(".adm-btn-overlay-trigger[rel]").overlay().close();
Disclaimer: I've never used jquery tools before, but as you see in my js fiddle, it seems to work.
Update: to make this work with multiple triggers you seem to need to find the exact trigger that opened the overlay. See http://jsfiddle.net/Fwzwc/3/ for an example for this.
It boils down to finding the id of the overlay div and then call .overlay().close() on the trigger where rel=overlayId:
$("img[rel='#" + overlayId + "']").overlay().close();