Please refer to this page for reference: http://loadedgranola.valitics.com/_product_83484/blackberry_lime
I have a jQuery script that runs to replace the h1 tags with a background image. It works great when the document loads but when I click "add to cart", after the javascript alert the jQuery styling breaks. Due to CMS restrictions I have no direct access to their javascript or any of the ASP files but I assume there has to be an easy fix to this.
The code I'm using:
jQuery(document).ready(function(){
var textReplacer = document.title.replace(/ /g,'');
jQuery("h1").addClass('replaced').css("background","url(../images/h1/" + textReplacer + ".png) no-repeat 0 0");
});
I have also tried using the function pageLoad(sender, args) { magic but no luck.
Here you go ..
jQuery(document).ready( function() {
jQuery('<style type="text/css" media="screen">h1{text-indent:-9999px!important;background:url(../images/h1/'+document.title.replace(/ /g,'') +'.png) no-repeat 0 0!important;}</style>').appendTo('head');
});
what it does is add a new css rule that pushes the text way out of the box and adds the background image
Here is what is happening:
When you submit the shopping cart it's doing an AJAX call. The result of that call replaces most of the HTML on the page. Any changes you made before that get replaced.
Possible Solution
You would have to run that replace script again after the AJAX call is complete.
Questions
Why are you replacing the H1 tags on load? What problem are you trying to solve? You might be able to find a better CSS solution.
Related
Newbie question here. I have searched a lot and found different parts of the solution but I cannot work out how to put everything together. I hope you can help me.
I need to add a link to my site which will open a new window with specific size in the bottom right corner of the screen. I found this code doing exactly that:
<a onClick="openWindow(); return false;"http://www.example.com">Ask your question!</a>
<script>
var topsss=screen.height-500;
var left=screen.width-400;
function openWindow() {
window.open("http://www.example.com", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top="+topsss+",left="+left+",width=400,height=500");
}
</script>
Within the new window I don't want to show mysite.com but I need an iFrame showing the content.
I managed to get a new window with the iFrame but the content is not showing in the iFrame:
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=420,height=515");
myWindow.document.write('<iframe width="400" height="500" src="http://www.example.com"
frameborder="1" allowfullscreen></iframe>');
}
</script>
Can you help me to put this all together and make this work?
Thanks for your help!
//Manon
I guess that you want to display a form for the user to fill, instead of opening new page for that.
Would it be possible to contain that form/page for all of your pages and have CSS trick to show/hide it? I know it's not what you are asking but the iframes and new pages could just cause you problems, cross-domain-scripting, and overall iframe is controversila (some consider it dead and deprecated by html5). So there might be a more elegant way to do the same with just CSS/JS, you can do more conditions, more controls where it will be placed and what it will do (animations, effects, some interaction with your original page).
https://allyjs.io/tutorials/hiding-elements.html
If you are making a SPA style website then maybe you are not aware of SPA frameworks? There is a lot of JavaScripts frameworks doing these things for you:
https://en.wikipedia.org/wiki/Single-page_application
is there any simple jquery script/plugin to apply bootstrap pagination style in asp.net gridview ? I've found some good tips about how to do this, like these links: here and here.
the only problem with these tips/solutions is we need to make a lot of changes to achieve the result and this is not preferable when you have large application and you want to transform it to bootstrap style. we need another solution. like a simple jquery script that can do the job without making lot changes to the current code.
I've made simple jquery script to apply the bootstrap pagination in asp.net gridview and I think it will be useful to share it here in stackoverflow.
source code of this script is hosted in github here.
usage is very simple:
-include the plugin js file in your asp.net page file:
<script type="text/javascript" src="js/bs.pagination.js"></script>
-set gridview property:
PagerStyle-CssClass="bs-pagination"
that's is all you need to apply bootstrap pagination style in asp.net gridview.
check my blog for more info.
Edit:
about the problem when using gridview inside UpdatePanel, the reason of this problem is because “UpdatePanel completely replaces the contents of the update panel on an update. This means that those events we subscribed to are no longer subscribed because there are new elements in that update panel.”
There is more than one solution to solve this problem:
Solution 1:
Use pageLoad() instead of $(document).ready. Modify the code like this:
function pageLoad() {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
}
Solution2:
re-change the style after every update. We can do this by adding these lines to the bs.pagination.js file:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
});
Doesn't Drupal 7 block javascript code in body field of the node? I use filter "Full HTML" and still it doesn't work. Maybe I don't load it right, here it is:
$(document).ready(function(){
$('.text-block:gt(0)').hide();
setInterval(function(){
$('#text-blocks > :first-child').fadeOut(0)
.next().fadeIn(0)
.end()
.appendTo('#text-blocks');
},
3000);
I know that when putting jQuery into drupal fields, you have to wrap them in script and jquery tags.
<script>
(function ($) {
// Original JavaScript code.
})(jQuery);
</script>
It would probably be best to enable the PHP filter if you can. Enable that in the modules section and use it for that specific block.
If you are using a WYSIWYG, you would have to switch it to plain text for the javascript to work.
I don't know mechanisms of displaying nodes in drupal but when i removed $(document).ready(function(){ from my script, it started to work fine.
I've inherited some code that I need to debug. It isn't working at present. My task is to get it to work. No other requirements have been given to me. No, this isn't homework, this is a maintenance nightmare job.
ASP.Net (Framework 3.5), C#, jQuery 1.4.2. This project makes heavy use of jQuery and AJAX. There is a drop down on a page that, when an item is chosen, is supposed to add that item (it's a user) to an object in the database.
To accomplish this, the previous programmer first, on page load, dynamically loads the entire page through AJAX. To do this, he's got 5 div's, and each one is loaded from a jQuery call to a different full page in the website.
Somehow, the HTML and BODY and all the other stuff is stripped out and the contents of the div are loaded with the content of the aspx page. Which seems incredibly wrong to me since it relies on the browser to magically strip out html, head, body, form tags and merge with the existing html head body form tags.
Also, as the "content" page is returned as a string, the previous programmer has this code running on it before it is appended to the div:
function CleanupResponseText(responseText, uniqueName) {
responseText = responseText.replace("theForm.submit();", "SubmitSubForm(theForm, $(theForm).parent());");
responseText = responseText.replace(new RegExp("theForm", "g"), uniqueName);
responseText = responseText.replace(new RegExp("doPostBack", "g"), "doPostBack" + uniqueName);
return responseText;
}
When the dropdown itself fires it's onchange event, here is the code that gets fired:
function SubmitSubForm(form, container) {
//ShowLoading(container);
$(form).ajaxSubmit( {
url: $(form).attr("action"),
success: function(responseText) {
$(container).html(CleanupResponseText(responseText, form.id));
$("form", container).css("margin-top", "0").css("padding-top", "0");
//HideLoading(container);
}
}
);
}
This blows up in IE, with the message that "Microsoft JScript runtime error: Object doesn't support this property or method" -- which, I think, has to be that $(form).ajaxSubmit method doesn't exist.
What is this code really trying to do? I am so turned around right now that I think my only option is to scrap everything and start over. But I'd rather not do that unless necessary.
Is this code good? Is it working against .Net, and is that why we are having issues?
A google search for
jquery ajax submit
reveals the jQuery Form Plugin. Given that, is that file included on your page where the other code will have access to the method? Does this code work in Firefox and not IE?
Seems like there was too much jQuery fun going on. I completely reworked the entire code block since it was poorly designed in the first place.
Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.
I use the Prototype framework to make it easier:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
In short no.
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
Yes. Take a look at this other thread for details:
How to apply CSS to iframe?
const cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
// ^frame1 is the #id of the iframe: <iframe id="frame1">
You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
Good Luck!
The quick answer is: No, sorry.
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
Use Jquery and wait till the source is loaded,
This is how I have achieved(Used angular interval, you can use javascript setInterval method):
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
Combining the different solutions, this is what worked for me.
$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
Apparently it can be done via jQuery:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
https://stackoverflow.com/a/13959836/1625795
probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.
Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine.
The only solution is to fetch the page from the server side code and change the needed CSS.
A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Just add this and all works well:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
If the iframe comes from another server, you will have CORS ERRORS like:
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
Only in the case you have control of both pages, you can use https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage to safely send messages like this:
On you main site(one that loads the iframe):
const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');
on the iframe site:
// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
});
Yes, it's possible although cumbersome. You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. I don't need this so I don't want to code that function into every item in the CSS of another webpage just to aphtply.
References:
Printing content of IFRAME
Accessing and printing HTML source code using PHP or JavaScript
http://www.w3schools.com/js/js_htmldom_html.asp
http://www.w3schools.com/js/js_htmldom_css.asp