ওভারফ্লো-এক্স: লুকানো বিষয়বস্তু মোবাইল ব্রাউজারগুলিতে উপচে পড়া থেকে প্রতিরোধ করে না

142

আমি একটি ওয়েবসাইট আছে এখানে ।

একটি ডেস্কটপ ব্রাউজারে দেখা হয়েছে, কালো মেনু বারটি সঠিকভাবে কেবল উইন্ডোর প্রান্তে প্রসারিত হয়েছে, যেহেতু bodyরয়েছে overflow-x:hidden।

যে কোনও মোবাইল ব্রাউজারে, অ্যান্ড্রয়েড বা আইওএস যাই হোক না কেন, কালো মেনু বারটি এর সম্পূর্ণ প্রস্থ প্রদর্শন করে, যা পৃষ্ঠার ডানদিকে সাদা স্থান নিয়ে আসে। আমি যতদূর বলতে পারি, এই সাদা স্থানটি এমনকি ট্যাগ htmlবা bodyট্যাগগুলির একটি অংশ নয় ।

এমনকি যদি আমি ভিউপোর্টটিকে একটি নির্দিষ্ট প্রস্থে সেট করি তবে <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

সাইটটি 1100px এ প্রসারিত হয়েছে তবে এখনও 1100 এর বাইরে সাদা স্থান রয়েছে।

আমি কী মিস করছি? আমি কীভাবে ভিউপোর্টকে 1100 এ রাখব এবং ওভারফ্লো কেটে দেব?

css  overflow  viewport  mobile-browser 
— Indigenuity
সূত্র
1
এটি আইওএস 9
— চক লে বাট

উত্তর:

270

এর ভিতরে একটি সাইট র‍্যাপার ডিভি তৈরি করা এবং মোড়কের পরিবর্তে মোড়কে<body> প্রয়োগ করা বা সমস্যাটি স্থির করা। overflow-x:hidden<body><html>

এটি প্রদর্শিত হয় যে ব্রাউজারগুলি যা <meta name="viewport">ট্যাগকে বিশ্লেষণ করে তা কেবল ট্যাগ এবং ট্যাগগুলির overflowবৈশিষ্ট্যগুলিকে উপেক্ষা করে ।htmlbody

দ্রষ্টব্য: position: relativeআপনার মোড়ক ডিভিতেও যুক্ত করতে হতে পারে ।

— Indigenuity
সূত্র
44
আমি দেখেছি সেটিং ছাড়াও যে overflowকরতে hidden, আমি সেট করতে ছিল positionথেকে fixed...
— ভিক্টর এস
16
স্থিরিতে অবস্থান যুক্ত করা আমাকে স্ক্রোল করতে সক্ষম হতে বাধা দেয়!
— থিওরিজ
5
আমি চেষ্টা করেছি, আমি আমার সমস্ত কোড একটি ডিভের ভিতরে রেখে এটিকে ওভারফ্লো-এক্স দিয়েছি: লুকানো তবে কাজ করে না, আমি <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1"> যুক্ত করি খুব কিন্তু কিছুই পরিবর্তন হয়নি: / কোন ধারণা?
4
overflow-x: hiddenআমি এই মেটা ট্যাগ যুক্ত করার পরেও @ ঘুমের কর্মীরা এখনও আমার জন্য কাজ করছে না। আপনি যেখানে দয়া করে আপনার ওয়েবসাইটের লিঙ্কটি ভাগ করতে পারেন?
— বৃহস্পতিবার
3
আরে গ্যাং, যখন আমি দেখতে পেলাম যে এটি position:relativeকাজ করে।
— টমাস ভালাদেজ
80

চেষ্টা

html, body {
  overflow-x:hidden 
}

পরিবর্তে ন্যায়বিচার

body {
  overflow-x:hidden 
}
— subarachnid
সূত্র
7
ধন্যবাদ, তবে overflowকোনও কিছুর প্রয়োগ htmlএবং / অথবা bodyকোনও সংমিশ্রমে সমস্যার সমাধান হয়নি didn't
— নির্দোষ
দুঃখিত যে এটি আপনার পক্ষে কার্যকর হয়নি। আমি উত্তর দেওয়ার আগে আমি আপনার সাইটটি ব্যবহার করে এবং আপনার সিএসএসে আমার পরামর্শটি প্রয়োগ করে একটি দ্রুত পরীক্ষা করেছি। এটি কমপক্ষে আমার অ্যান্ড্রয়েড ফোনে স্ট্যান্ডার্ড- এবং ডলফিন ব্রাউজারের জন্য সমস্যার সমাধান করেছে।
— subarachnid
3
আমার জন্য কাজ করেছেন। eduardd.eu/projects/ezo (480 থেকে 992px ফুটারের মধ্যে মহিলার ও তোয়ালেগুলির উপচে পড়া চিত্রটি নিয়ে সমস্যা হয়েছিল)
— এডুয়ার্ড
2
বডি spec h এবং এইচটিএমএল {} পৃথকভাবে নির্দিষ্ট করে না কেন এটি কেন কাজ করে কেউ জানেন?
— হামানসিজেজ
1
height:100%;পাশাপাশি যুক্ত করার প্রয়োজনে , অন্যথায় উল্লম্ব স্ক্রোলটি লোডিং ইমেজযুক্ত পৃষ্ঠাগুলিতে সঠিকভাবে কাজ করবে না (যা পৃষ্ঠার উচ্চতা বাড়ায়)।
— আরনো ভ্যান ওর্ড্ট
69

স্বীকৃত উত্তরের বিষয়ে ভিক্টরের মন্তব্যটি তার নিজের উত্তর হিসাবে প্রাপ্য কারণ এটি একটি খুব মার্জিত সমাধান যা সত্যই কাজ করে। এবং আমি এটির উপযোগে একটি বাচ্চা যুক্ত করব।

ভিক্টরের নোটগুলি যুক্ত করার position:fixedকাজগুলি।

body.modal-open {
    overflow: hidden;
    position: fixed;
}

এবং প্রকৃতপক্ষে এটি করে। তবে এটির উপরে শীর্ষে স্ক্রোলিংয়ের সামান্য পার্শ্ব-প্রভাবও রয়েছে। position:absoluteএটি সমাধান করে তবে, মোবাইলে স্ক্রোল করার সক্ষমতাটি নতুন করে পরিচয় করিয়ে দেয়।

আপনি যদি নিজের ভিউপোর্টটি ( ভিউপোর্ট যুক্ত করার জন্য আমার প্লাগইন<body> ) জানেন তবে আপনি কেবলমাত্র একটি সিএসএস টগল যুক্ত করতে পারেন position।

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

মোডালগুলি দেখানো / লুকিয়ে রাখার সময় অন্তর্নিহিত পৃষ্ঠাটি বাম / ডান দিক থেকে লাফানো থেকে রোধ করতে আমি এটি যুক্ত করি।

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}
— সরু চেপটা পেরেক-বিশেষ
সূত্র
2
মোবাইল অংশটি শীর্ষে না যাওয়ার জন্য কী কী আছে?
— WraithKenny
1
আমার জন্য যা কাজ করেছে তা সেই উপাদানটি ঘুরিয়ে দিচ্ছিল যা অবস্থান থেকে ওভারফ্লো দ্বারা আড়াল হওয়ার কথা ছিল: পরম স্থানে স্থির: স্থির। সৌভাগ্যক্রমে।
— চক লে বাট
1
@ ব্রাইথকেনি - আপনি যদি কোনও মোবাইল ডিভাইসে পৃষ্ঠায় শীর্ষে উঠে আসা রোধ করতে চান তবে আপনি নীচের হ্যাক'শ / কুরুচিপূর্ণ পদ্ধতির ব্যবহার করতে পারেন। আপনার মডেল ফাংশনের অভ্যন্তরে, নিশ্চিত হয়ে নিন যে কোনও কিছু করার আগে আপনি বর্তমান স্ক্রোলটি অফসেট পেয়েছেন, একসাথে মডেল স্টাইলটি প্রয়োগ করুন এবং আপনার শরীরের শীর্ষ প্রান্তটি বর্তমান অফসেটের বিয়োগের সমান হিসাবে সেট করুন। আপনি যখন মোডালটি সরিয়ে ফেলবেন তা নিশ্চিত করুন, মার্জিনটি 0 এ সেট করুন এবং পৃষ্ঠাটি মূল অফসেটে ফিরে স্ক্রোল করুন।
— এমিল বোরকোনি
2
আপনার মডেলের বিষয়বস্তু স্ক্রিনে ফিট হয়ে গেলে এই সমাধানটি কেবল তখনই কাজ করে, যেমন আপনার নিজেরাই মডেলটি স্ক্রোল করার প্রয়োজন নেই।
— টোবিয়াস
আমার পৃষ্ঠায় অন্যান্য স্থির এবং নিখুঁত অবস্থানযুক্ত উপাদানও রয়েছে। শরীরকে position:fixed or absoluteপাশাপাশি তাদের অবস্থানকেও বিঘ্নিত করা। আমার ক্ষেত্রে উপযুক্ত / কাজ করছে না :(
— sohaiby
31

এটি সাফারিতে ভয়াবহ স্ক্রোলিং সমাধানের সহজ সমাধান।

html, body {
  position:relative;
  overflow-x:hidden;
}
— ওয়াল্টুর বুর্ক
সূত্র
1
মনে হচ্ছে এটি কাজ করে। তবে কেন এটি কাজ করে আপনার কোনও ব্যাখ্যা আছে?
— লার্জ
না, শেষ পর্যন্ত এটি কাজ করে না। আমি গণিতটি শেষ করেছি এবং নিশ্চিত করেছি যে ডিভের অনুমতি ব্যতীত বৃহত্তর নয়, সিএসএস ক্যালক () আমাকে এখানে অনেক বেশি সহায়তা করেছে কারণ এটি আপেক্ষিক প্রস্থ (vw বা%) এবং পরম প্রস্থ (px) এর মিশ্রণটিকে অনুমতি দেয়।
— বড়
অবশ্যই এটি একটি কার্যবিবরণীর কিছু। এখনও কোথাও উপচে পড়া কিছু রয়েছে, এটি এখনই বন্ধ হয়ে গেছে। একটি সিএসএস বিধি যুক্ত করার চেষ্টা করুন: * {রূপরেখা: 1px কঠিন লাল; Still আপনি যদি এখনও উপচে পড়া উপাদানটি খুঁজে না পান তবে সম্ভবত এটি কোথাও কোথাও মার্জিনের কারণে হয়ে গেছে। * {মার্জিন যুক্ত করার চেষ্টা করুন: 0! গুরুত্বপূর্ণ; } এবং দেখুন ওভারফ্লো অদৃশ্য হয়ে গেছে কিনা।
— ওয়াল্টুর বুর্ক
আমার জন্য কাজ কর. আকর্ষণীয় যে লুকানো উপাদান শরীরের প্রস্থ পরিবর্তন করে। আমার জন্য তবে এটি কেবল মোবাইলের নয়, সমস্ত সাফারি ব্রাউজারগুলির ক্ষেত্রে। শুধু একটি বুটস্ট্র্যাপ 4 table-responsiveবাগ ঠিক করতে হয়েছিল । এই ছিল সমাধান।
— কুনিংফ্যাটালিস্ট
2
আমি বিশ্বাস করতে পারি না এটি ২০১২ সালে এখনও একটি সমস্যা But তবে উপরের সমাধানটি সম্পূর্ণ কাজ করেছে। ধন্যবাদ.
— স্ট্যাক্সিম
28

@ ইন্ডিগেনুইটি যেমন বলেছে, এটি ব্রাউজারগুলি <meta name="viewport">ট্যাগ বিশ্লেষণের কারণে ঘটেছে বলে মনে হয় ।

উত্সটিতে এই সমস্যাটি সমাধান করতে, নিম্নলিখিত চেষ্টা করুন:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">।

আমার পরীক্ষায় এটি ব্যবহারকারীকে উপচে পড়া সামগ্রী দেখতে জুম আউট করতে বাধা দেয় এবং ফলস্বরূপ এটিতে প্যানিং / স্ক্রোলিং প্রতিরোধ করে।

— Tempurturtul
সূত্র
initial-scale=1বিদ্যমান ভিউপোর্ট মেটাট্যাগে যুক্ত করা সমস্যাটিকে প্রকৃতপক্ষে সমাধান করে। ধন্যবাদ!
— জেমস উইলসন
6
আমার জন্য এটি minimum-scale=1এটি স্থির করেছিল
— জেপেনা
অন্য সবকিছু চেষ্টা করার পরে এটিই আমার পক্ষে কাজ করেছিল। অনেক ধন্যবাদ !
— হার্শ লিমায়
16 
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

iOS9 এ কাজ করে

— ollio
সূত্র
3
এটি কাজ করে, তবে অবস্থান নির্ধারণ: আপনার দেহের সাথে স্থির করা আপনাকে শীর্ষে স্ক্রোল করে তোলে
— ThaoD5
1
অদ্ভুত তবে এটি আমার পক্ষে স্থির অবস্থান ছাড়াই কাজ করেছিল। এখানে সমস্ত সমাধান থেকে এক!
— গারাভানি
ক্রোম এবং বুস্ট্র্যাপ + অ্যাঙ্গুলার জেএস ব্যবহার করে শুধুমাত্র আমার পক্ষে কাজ করেছে
— কিউইকম্ব 1212
6

ভিউপোর্টটি অপরিচ্ছন্ন রাখুন: <meta name="viewport" content="width=device-width, initial-scale=1.0">

ধরে নিচ্ছি যে আপনি একটি ধারাবাহিক কালো বারের প্রভাবটি ডান পাশে অর্জন করতে চান: 100% এর#menubar বেশি হওয়া উচিত নয় , সীমানার ব্যাসার্ধটি এমনভাবে সামঞ্জস্য করুন যে ডান দিকটি স্কোয়ারযুক্ত এবং প্যাডিংটি সামঞ্জস্য করুন যাতে এটি ডানদিকে আরও কিছুটা প্রসারিত হয় । আপনার নিম্নলিখিতটি সংশোধন করুন :#menubar

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

সামঞ্জস্য paddingঅবশ্যই পাতার 10px বারের প্রান্ত থেকে বাম মেনু জন্য, আপনাকে অবশিষ্ট লাগাতে পারেন 40px প্রত্যেকটি li, 20px প্রতিটি পাশ দিয়ে বাম এবং ডান:

.menuitem {
display: block;
padding: 0px 20px;
}

আপনি যখন ব্রাউজারটিকে ছোট আকার দিন, তখনও আপনি সাদা পটভূমি খুঁজে পাবেন: আপনার ব্যাকগ্রাউন্ড টেক্সচারটি আপনার ডিভ থেকে পরিবর্তে রাখুন body। অথবা বিকল্পভাবে, মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে নেভিগেশন মেনু প্রস্থটি 100% থেকে কম মানে সামঞ্জস্য করুন। সঠিক লেআউট তৈরি করতে আপনার কোডে প্রচুর পরিমাণে সমন্বয় করতে হবে, আপনি কী করতে চান তা আমি নিশ্চিত নই তবে উপরের কোডটি কোনওভাবে আপনার উপচে পড়া বারটি ঠিক করবে।

— অ্যান
সূত্র
আপনি যদি ব্যবহার করেন box-sizing: border-box;তবে 100% প্রস্থের ডিভিডিতে প্যাডিং যুক্ত করতে পারেন।
— চার্লস জন থম্পসন তৃতীয়
6

শরীরের অভ্যন্তরে একটি সাইট র‍্যাপার ডিভি তৈরি করা এবং ওভারফ্লো-> এক্স: শরীরের র‌্যাপারে লুকানো বা এইচটিএমএল সমস্যা সমাধান করেছে।

এটি position: relativeর‍্যাপারে যুক্ত করার পরেও আমার পক্ষে কাজ করেছিল।

— আইজাক এফ
সূত্র
এটি আমার পক্ষে কাজ করেছে। পার্শ্ব প্রতিক্রিয়াটি হ'ল আমি একটিটির পরিবর্তে দুটি স্ক্রোল বার পেয়েছি। সমাধানটি overflow: hiddenপরিবর্তে এটি করা ছিল overflow-x: hidden। ওএসএক্স এবং উইনে মোবাইল সাফারি, ক্রোম, আইই 11 এ কাজ করে।
— পপ
4

<div>আপনার সামগ্রীর পুরোপুরি একটি মোড়ক যুক্ত করা কার্যকরভাবে কাজ করবে। শব্দার্থগতভাবে "আইকি" থাকাকালীন আমি bodyট্যাগের ডানদিকে ওভারফ্লো র্যাপের একটি শ্রেণির সাথে একটি ডিভ যুক্ত করেছি এবং তারপরে আমার সিএসএসটি সেট করেছি:

html, body, .overflowWrap {
overflow-x: hidden;
}

এখন ওভারকিল হতে পারে, তবে কবজির মতো কাজ করে!

— MBurnette
সূত্র
4

আমি iOS ডিভাইসগুলির সাথে নয় তবে অ্যান্ড্রয়েড ডিভাইসগুলির সাথে একই সমস্যার মুখোমুখি হয়েছি। অবস্থান নির্দিষ্ট করে সমাধানের জন্য পরিচালিত: একেবারে অবস্থানযুক্ত উপাদানগুলির বহিরাগত ডিভের তুলনায় (ওভারফ্লো সহ: বহিরাগত ডিভের জন্য লুকানো)

— কোভাক প্যান ফাং
সূত্র
4

পূর্ববর্তী কোনও একক সমাধান আমার পক্ষে কাজ করে নি, আমাকে তাদের মিশ্রিত করতে হয়েছিল এবং সমস্যাটি পুরানো ডিভাইসেও সংশোধন করতে হয়েছিল (আইফোন 3)।

প্রথমত, আমাকে এইচটিএমএল সামগ্রীটি একটি বাহ্যিক ডিভের মধ্যে আবদ্ধ করতে হয়েছিল:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

তারপরে আমাকে মোড়কের উপরে লুকানো ওভারফ্লো প্রয়োগ করতে হয়েছিল, কারণ ওভারফ্লো-এক্স কাজ করছে না:

  #wrapper {
    overflow: hidden;
  }

এবং এই বিষয়টি স্থির করে।

— spaghetticode
সূত্র
@ ইন্ডিগনুইটির উত্তরটির সাথে এটি কীভাবে আলাদা?
— ইয়ান কেম্প
3
@ আইয়ান কেম্প ওভারফ্লো: লুকানো! = ওভারফ্লো-এক্স: লুকানো
— স্প্যাগেটিকোড
3

আমি ওভারফ্লো-এক্স ব্যবহার করে সমস্যাটি সমাধান করেছি: লুকানো; নিম্নরূপ

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

কাঠামোটি নিম্নরূপ

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

— বিকাশ এটাগি
সূত্র
3

যেমন subarachnid বলেছেন যে শরীর এবং html উভয়ের জন্য ওভারফ্লো-এক্স লুকানো রয়েছে এখানে কাজের উদাহরণ

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

লিংক

— স্কাইলিন আর
সূত্র
1

আমি এই এবং অন্যান্য পৃষ্ঠাগুলির থেকে বিভিন্ন সংমিশ্রণ চেষ্টা করে কয়েক ঘন্টা ধরে এটি নিয়ে কাজ করছি। শেষ পর্যন্ত আমার জন্য যে জিনিসটি কাজ করেছিল তা হ'ল গৃহীত রেভার ডিভি তৈরি করা, যেমনটি গৃহীত উত্তরের পরামর্শ হিসাবে দেওয়া হয়েছে, তবে কেবল এক্স ওভারফ্লোয়ের পরিবর্তে উভয় ওভারফ্লো লুকানোতে সেট করা। আমি যদি স্ক্রোলটিতে ওভারফ্লো-ওয়াই ছেড়ে চলে যাই তবে আমি এমন পৃষ্ঠাটি দিয়ে শেষ করব যা কেবল কয়েকটি পিক্সেল দ্বারা উল্লম্বভাবে স্ক্রোল করে এবং তারপর থামবে।

#all-wrapper {
  overflow: hidden;
}

শরীরে বা এইচটিএমএল উপাদানগুলিতে কোনও সেট না করে কেবল এটি যথেষ্ট ছিল।

— highfellow
সূত্র
1

আমি এই বিষয়ে জবাব থেকে অনেকগুলি উপায় চেষ্টা করেছি, বেশিরভাগই কাজ করে তবে কিছুটা পার্শ্ব-প্রতিক্রিয়া পেয়েছি যেমন আমি ওভারফ্লো-এক্স ব্যবহার করি body,html ব্যবহারকারীরা মোবাইলে স্ক্রল করার সময় পৃষ্ঠাটি ধীর / হিমায়িত হতে পারে।

ব্যবহার position: fixedদেহের অভ্যন্তরে মোড়ক / ডিভ খুব ভাল তবে আমি যখন একটি মেনু পেয়ে জাভাস্ক্রিপ্ট ক্লিক করে অ্যানিমেটেড স্ক্রোলটি কিছু বিভাগে ব্যবহার করি তখন এটি কাজ করে না।

সুতরাং, আমি touch-action: pan-y pinch-zoomদেহের অভ্যন্তরে মোড়ক / ডিভি ব্যবহার করার সিদ্ধান্ত নিয়েছি । সমস্যা সমাধান.

— জিয়ারু এল
সূত্র
0

আমার বুটস্ট্র্যাপ মডেলটির জন্য এই সমস্যাটি সমাধান করার একমাত্র উপায় (একটি ফর্মযুক্ত) ছিল আমার সিএসএসে নিম্নলিখিত কোড যুক্ত করা:

.modal {
    -webkit-overflow-scrolling: auto!important;
}
— Tobias
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.